html - 如何制作不是 100% 宽度的行分隔符/底部边框？

Question

我有一组在标准 HTML 表格标记中显示的表格数据。该设计要求在每一行之间使用一个像素的分隔线，并要求给定行中的所有单元格彼此垂直居中。各种行和单元格可以具有任意高度，并且需要根据其中的内容增长。

这里的棘手部分来自于这样一个事实，即一个像素的分隔线应该从表格边缘的任一侧停止 15px。我最初倾向于解决这个问题只是添加一个 border-bottom到我的 <tr>或 <td>标签，然而，我终其一生都想不出任何方法来阻止这条线一直穿过。如果我把 <div> <td> 内的标签标签，然后我可以在那里应用边框，但是我的边框底部正好靠在内容的底部而不是行的底部。

我唯一能做的工作对我来说真的很“脏”。

<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>

之所以可行，是因为我在行的两端添加了这两个间隔单元格。我什至已经走得很远了一些非表格解决方案，但我总是遇到问题试图让内容正确增长(即在各行中没有绝对定位)和/或让东西垂直居中并像它们一样包装应该。

有人有更好的想法吗？如果有帮助，我只支持“较新”的浏览器，例如IE9+/等，包括移动设备。

Answer 1

您可以尝试在每对或每行之间添加一个新行，其中 colspan="n"其中 n 是列的总数，并在该新行中放置一个具有所需规范的 div(我会说 1px 高度，例如)。

HTML，在你的行之间添加:

<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;
}

这是 fiddle :http://jsfiddle.net/Y8eWR/