Q: How do I make row separator/bottom-border that isn't 100% width? I've got a set of tabular data that I'm presenting in a standard HTML table tag. The design calls for a one pixel separating line between each row as well as having all cells in a given row be vertically centered against each other. The various rows and cells can have an arbitrary height and need to grow based on the content inside of them.
The tricky piece here comes from the fact that the one pixel separating line is supposed to stop 15px from either side of the edge of the table. My initial inclination to solve this is to merely add a border-bottom to either my <tr> or <td> tags, however, I couldn't for the life of me figure out any sort of way to not get the line to go all the way across. If I put <div> tags inside of the <td> tags, I can then apply the border to there, but then my border bottom is right up against the bottom of the content rather than at the bottom of the row.
The only thing I've been able to make work feels really "dirty" to me.
<table>
  <tr>
    <td style="width: 15px;">&nbsp;</td>
    <td style="border-bottom: 1px solid gray;">My table data</td>
    .... more cells here as needed
    <td style="width: 15px;">&nbsp;</td>
  </tr>
</table>

This works because I add those two spacer cells on either end of the row. I've even gone pretty far down some non-table solutions, but I always run into issues trying to get the content to grow correctly (i.e. no absolute positioning in the various rows) and/or getting things to vertically center and wrap like they are supposed to.
Anybody have any better ideas? If it helps, I'm only supporting "newer" browsers, e.g. IE9+/etc, including mobile.

A: You can try adding a new row between each pair or rows with colspan="n" where n is the total number of collumns, and inside that new row you put a div with the desired specs (I would say 1px height, for instance).
HTML, add this between your rows:
<tr class="test_tr" >
    <td colspan="3"><div class="test_div"></div></td>
</tr>

CSS:
.test_tr
{
    height: 1px;
}

.test_div {
    height: 1px;
    width: 80%;
    background-color: red;
    margin: 0 auto;
}

Here is the Fiddle: http://jsfiddle.net/Y8eWR/
