如何在html表格中分隔两个tr

Posted 2023-03-05

【中文标题】如何在html表格中分隔两个tr

【英文标题】：How to separate two tr's in an html table

【发布时间】：2011-06-06 10:26:18

【问题描述】：

是否有可能在 html 表格中的两行 (tr) 之间使用视觉分隔符。

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

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

目前我使用的是空行：

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

但我认为这不是最好的解决方案，特别是因为如果列数发生变化，我必须确保调整 colspan。

有没有办法解决这个问题？

【问题讨论】：

我实际上更喜欢“空”行。所以边界不是我们想要的。

【参考方案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-ed 边框）：

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

【参考方案2】：

<tr /> 元素并非在所有浏览器中都可以设置样式，但是您始终可以为 tr 内的单元格添加填充或底部边框。

【参考方案3】：

实际上，我一直为此使用单独的trs。我通过分隔符类设置它们的样式（例如其中的一个 td）。

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