【发布时间】：2012-01-21 06:45:27
【问题描述】：
我有一个表格，其边框在 CSS 中设置为“无”。但是，我想用一条水平线分隔桌子上的每一行。
我尝试在特定行的每个 <td> </td> 标记之间放置 <hr> 标记，但它会打印一条水平黑线，每列之间有小空格。
有没有什么方法可以使用不同的方法在表格中打印水平线？
【问题讨论】：
标签： html
【发布时间】：2012-01-21 06:45:27
【问题描述】：
我建议把：
<tr style="border-bottom: 1px solid #000;">
在您希望线路所在的每一行上。您也可以为每个单元格单独执行此操作。
更新
如果可以的话，我建议使用一个 css 类和一个单独的样式表。例如
<tr class="bordered"></tr>
tr.bordered {
border-bottom: 1px solid #000;
}
【讨论】：
-
我不会使用内联样式，而是使用类。
-
我个人会使用一个类。但是对于刚开始开发电子邮件的人来说，无论哪种方式都有效 + 内联样式更容易学习
-
我不认为 tr 可以直接采用边框样式。见这里：stackoverflow.com/questions/10040842/…
-
TR 无法获得边框样式。不知道为什么这是公认的答案，这应该行不通。
-
这个答案确实有效，但并未说明这只适用于设置为
collapse的border-collapse规则。
在行之间添加水平线的最佳方法是使用 CSS 边框。首先，您要折叠表格的所有边框，以便单元格之间没有空格（这也可能有助于您的解决方案，但我不建议为此目的使用 hr）。接下来，在每个单元格 (td) 的底部指定一个边框。类似地，您可以将边框设置为向左、向右、向上等。请参阅下面的自包含 HTML。
<html>
<head>
<style type='text/css'>
table.test { border-collapse: collapse; }
table.test td { border-bottom: 1px solid black; }
</style>
</head>
<body>
<table class='test'>
<tr><td>1</td><td>2</td><td>3</td><td>4</td></tr>
<tr><td>1</td><td>2</td><td>3</td><td>4</td></tr>
<tr><td>1</td><td>2</td><td>3</td><td>4</td></tr>
</table>
</body>
</html>
更多边框选项，请查看this w3Schools page。
【讨论】：
-
这应该被标记为正确答案，因为在大多数现代浏览器中实际上不可能接受这个答案。不确定它是否回到了 11 年，但现在已经不是了。
您可以为您的“分隔”<tr> 定义一个 CSS 类：
<style>
tr.separated td {
/* set border style for separated rows */
border-bottom: 1px solid black;
}
table {
/* make the border continuous (without gaps between columns) */
border-collapse: collapse;
}
</style>
然后只标记所需的行：
<tr>
<td>
<td>
</tr>
<tr class="separated">
<td>
<td>
</tr>
<tr>
<td>
<td>
</tr>
【讨论】：
-
TRs 无法获取边框样式。
-
另一件使这个答案几乎与其他答案一样的事情是，除非表格上有border-collapse:collapse 样式，否则边框可能会看起来被破坏。我赞成已经包含此内容的答案，但感谢您做出调整。我删除了反对票。
你可以试试这个，效果很好：
<tr>
<td colspan="Number of columns">
<hr>
</td>
</tr>
【讨论】：
-
像魅力一样工作。
您不能将任何不是表格行的内容放在表格主体中。
相反，您应该为需要下划线的行指定一个类，这样您就可以在样式表中设置它们的底部边框。
【讨论】：
我知道这个帖子已经有一段时间没有被触及了，但我遇到了这个可能的解决方案？
例如，如果使用 2 列表，请使用 <td colspan="2"></td>。它将跨越两列的两个单元格，无需任何额外的 CSS。
<tr>
<td>data<td>
<td>data2</td>
</tr>
<td colspan="2"></td>
拜托了，这是我第一次发帖！ :)
【讨论】：
-
您提供的解决方案仅创建一个跨越两列的单元格。 OP 的问题是要求 一种创建水平线来分隔表格中每一行的方法。
-
如果你把那个多列单元格放在一个新的
标签中，如果你把
放在这个单元格中，你会得到一条横穿表格的水平线。 （从技术上讲，您将创建一个仅包含一条水平线的新行。）对于 OP 的问题，它仍然是一个糟糕的解决方案，但在一些更有限的情况下可能有用。
你想在 tr 元素上加一个边框。 Hr 是一个水平规则，而不是边界，不应该被用作一个。
tr {
border-bottom: 1px solid #000;
}
<table cellpadding="0" cellspacing="0" width="200">
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
</table>
【讨论】：
noshade="noshade" 属性可以帮助你去除阴影，更多的想法可以从this link 找到，我的意思是基于 CSS 的 HR 线。
和基于表格的样式类似
.bottomborder {
border-bottom: 1px solid #CECECE;
}
<td class=border-bottom>
以下不起作用
<tr class=border-bottom>
【讨论】：
-
不会是
？
您所要做的就是在没有特定 Css 样式的情况下将水平规则作为新行放入，它会为您执行此操作并且非常容易实现。希望这会有所帮助！
<tr>
<td>
<hr>
</td>
</tr>
【讨论】：
你可以使用边框，但是如果你想创建一个 hr 标签（以便你可以设置它的样式），你需要在 td 中使用一个 div 标签
<!DOCTYPE html>
<html lang="en">
<head>
<style>
table{
border: 1px solid black;
}
td{
margin: 0;
}
div{
display: flex;
justify-content: center;
}
hr{
margin: 0;
width: 80%;
}
</style>
</head>
<body>
<table>
<tr>
<td>
1st row
</td>
</tr>
<tr>
<td>
<div><hr></div>
</td>
</tr>
<tr>
<td>
2nd row
</td>
</tr>
</table>
</body>
</html>如果您有多个列，请确保为您的 td 标签使用 colspan=(x cols)：
<!DOCTYPE html>
<html lang="en">
<head>
<style>
td{
margin: 0;
}
div{
display: flex;
justify-content: center;
}
hr{
margin: 0;
width: 80%;
}
</style>
</head>
<body>
<table>
<tr>
<td colspan="2" style="text-align:center;">
1st row
</td>
</tr>
<tr>
<td colspan="2">
<div><hr></div>
</td>
</tr>
<tr>
<td>
2nd row
</td>
<td>
2nd row
</td>
</tr>
</table>
</body>
</html>【讨论】：