How to format a <div> inside a <table>? - html

Question

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>Players</td>
<td>Duplicate</td>
<td>Archive</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>Players</td>
<td>Duplicate</td>
<td>Archive</td>
</tr>
<tr>
<td><div class="box">P</div></td>
<td>Could be better but ya.</td>
<td>0 / 50 plays</td>
<td>Players</td>
<td>Duplicate</td>
<td>Archive</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.

Answer 1

demo
<tr>
<td>P</td>
<td>My First Game</td>
<td>100 / 250 plays</td>
<td>Players</td>
<td>Duplicate</td>
<td>Archive</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;
}

Answer 2

Why not remove the div
<table>
<tbody>
<tr>
<td class="box">P</td>
<td>My First Game</td>
and then add vertical-align: middle to the .box css

Answer 3

According to http://css-tricks.com/using-divs-inside-tables/ absolute positioning should work but I'm not sure if I read your question right. Check this site out, it gives a good tutorial and explanation on divs inside tables.

Answer 4

Put the box class on the td cell itself instead of on a div inside the td (remove the div entirely). You're probably fighting cell padding, which is why you have so much whitespace around the box.
Look in to line-height and vertical-align CSS properties for the character positioning inside the box.
See fiddle for example: http://jsfiddle.net/dzDm3/2/
<td class='box'>P</td>
.box {
width: 26px;
height: 26px;
background-color: #5AD427;
text-align: center;
margin: 0;
padding: 0;
line-height: 26px;
}