Question

是否有可能在HTML表格中的两行（tr）之间设置可视分隔符。

我尝试使用<br>，但这不是有效的代码。

我尝试在休息后向tr添加填充顶部但不起作用。

目前我使用空行：

<tr><td colspan=\"X\">&nbsp;</td></tr>

但我不认为这是最好的解决方案，尤其是如果列数有变化，我必须确保调整colspan。

有什么方法可以解决这个问题吗？

Answer 1

已编辑以反映我重新阅读问题而不是问题的标题（原始答案仍然低于规则）。

如果你想要一个可视分隔符（而不仅仅是空格），那么只需使用：

td {
border-bottom: 1px solid #ccc; /* or whatever specific values you prefer */
}

增加表行之间的间距（我目前所知）的唯一方法是在单个行/单元格上使用padding：

td {
    padding: 0.5em 1em;
    border: 1px solid #ccc;
}

JS Fiddle demo

虽然有可能使用透明（或background-color - 边框）：

table {
    border-collapse: separate;
}

td {
    border-top: 0.5em solid transparent;
    border-bottom: 0.5em solid transparent;
}

td:hover {
    border-color: #ccc;
}

JS Fiddle demo

Answer 2

<tr />元素在所有浏览器中都没有样式，但是您总是可以在tr中的单元格中添加填充或底部边框。

Answer 3

实际上，我始终为此目的使用单独的tr。我通过分隔符类对它们进行样式化（例如，其中的一个）。

关于colspan问题，请参阅Colspan all columns。

如何在html表中分隔两个tr

3 个答案: