1

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

这里的棘手之处在于一个像素分隔线应该在距离表格边缘的任一侧停止 15 像素。我最初解决此问题的倾向是仅border-bottom在 my<tr>或<td>标签中添加 a ，但是，我终其一生都想不出任何方法来不让这条线一直穿过。如果我将<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+/等，包括移动设备。

4

1 回答 1

2

您可以尝试使用 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;
}

这是小提琴：http: //jsfiddle.net/Y8eWR/

于 2013-09-20T16:03:20.087 回答