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

我在标准HTML表格标记中提供了一组表格数据。该设计要求每行之间有一条像素分隔线，并且给定行中的所有单元都必须垂直居中对齐。各种行和单元格可以具有任意高度，并且需要根据它们内部的内容进行增长。

这里的棘手问题来自一个事实，即一个像素分隔线应该从表格边缘的任一侧停止15像素。我最初的解决方案是仅在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 + / etc，包括手机。

最佳答案

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

关于html - 如何制作宽度不为100％的行分隔符/底部边框？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/18921001/