如何在html表中分隔两个tr

Is there a possibility to have a visual separator between two lines (tr) in an HTML table.

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

I tried with a <br> but this is not valid code.

我试过一个
但这不是有效的代码。

I tried do add a padding-top to the tr after the break but it does not work.

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

Currently I use an empty line:

目前我使用空行：

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

but I don't think this is the best solution, especially as I have to make sure the colspan is adjusted if there is a change is the number of columns.

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

Is there any way to solve this?

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

3 个解决方案

#1

Edited to reflect my re-reading the question rather than the title of the question (original answer remains below the rule).

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

If you want a visual separator (rather than simply white-space) then simply use:

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

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

---

The only way to increase spacing between table rows, that I'm currently aware of, is to use padding on individual rows/cells:

增加表行间距的唯一方法是在单个行/单元格上使用填充：我现在知道的是：

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

JS Fiddle demo

JS小提琴演示

Although there is the potential to use transparent (or background-color-ed borders):

虽然有可能使用透明（或背景颜色边框）：

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

JS小提琴演示

#2

The <tr /> element is not stylable in all browsers however you could always add the padding or a bottom-border to the cells within the tr.

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

#3

Actually, I use separate trs for this purpose all the time. I style them (e.g. the one td within) via a separator class.

实际上，我总是为此目的使用单独的trs。我通过分隔符类对它们进行样式化（例如，在其中的td）。

About the colspan-problem see Colspan all columns.

关于colspan问题，请参阅Colspan所有专栏。