Q:

How to format a  inside a ?

I have this:

And I want to get to something like this:

Here is my html:
  <table>
    <tbody>
      <tr>
        <td><div class="box">P</div></td>
        <td>My First Game</td>
        <td>100 / 250 plays</td>
        <td><a href="#">Players</a></td>
        <td><a href="#">Duplicate</a></td>
        <td><a href="#">Archive</a></td>
      </tr>
      <tr>
        <td><div class="box">P</div></td>
        <td>The best game ever if it was done.</td>
        <td>0 / 250 plays</td>
        <td><a href="#">Players</a></td>
        <td><a href="#">Duplicate</a></td>
        <td><a href="#">Archive</a></td>
      </tr>
      <tr>
        <td><div class="box">P</div></td>
        <td>Could be better but ya.</td>
        <td>0 / 50 plays</td>
        <td><a href="#">Players</a></td>
        <td><a href="#">Duplicate</a></td>
        <td><a href="#">Archive</a></td>
      </tr>
    </tbody>
  </table>

Here is my css (scss): 
table {
   border: none;
   height: 33px;
   padding: 0;
   margin: 0;
}
.box {
  width: 33px;
  height: 33px;
  background-color: #5AD427;
  text-align: center;
  margin: 0;
  padding: 0;
}

A fiddle is here: http://jsfiddle.net/MattCamp/dzDm3/
My main concern is how to fix the boxes on the right side of each row. I can't seem to figure out how to format them so they don't have so much space around them and also to make the letter  in the middle centered.

A:

demo

  <tr>
    <td>P</td>
    <td>My First Game</td>
    <td>100 / 250 plays</td>
    <td><a href="#">Players</a></td>
    <td><a href="#">Duplicate</a></td>
    <td><a href="#">Archive</a></td>
  </tr>

table {
  width:100%;               /**/
  padding: 0;
  margin: 0;
  text-align:right;         /**/
  border-collapse:separate;
  border-spacing: 0 2px;
}

table tr       {background:#fff;}
table tr:hover {background:#eff;}

table tr       td             {padding:5px 8px;}
table tr       td:first-child {border-left: 3px solid #fff;}
table tr       td:last-child  {border-right:3px solid #fff;}  
table tr:hover td:first-child {border-left: 3px solid #4EB2E2;}
table tr:hover td:last-child  {border-right:3px solid #4EB2E2;}

table tr td:nth-child(1){
  color:#fff;
  width: 33px;
  background-color: #5AD427;
  padding: 5px 0;
  text-align: center;
}
table tr td:nth-child(2){
  text-align:left;
}

