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

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

如何使行分隔符/底部边框不是100％宽度？

1 个答案: