在表格中使用 <hr> 标签？
Posted
技术标签:
【中文标题】在表格中使用 <hr> 标签？【英文标题】：Using an <hr> tag with a table? 【发布时间】：2012-01-21 06:45:27 【问题描述】：我有一个表格，其边框在 CSS 中设置为“无”。但是，我想用一条水平线分隔桌子上的每一行。
我尝试在特定行的每个 <td> </td> 标记之间放置 <hr> 标记，但它会打印一条水平黑线，每列之间有小空格。
有没有什么方法可以使用不同的方法在表格中打印水平线？
【问题讨论】：
【参考方案1】：我建议把：
<tr style="border-bottom: 1px solid #000;">
在您希望线路所在的每一行上。您也可以为每个单元格单独执行此操作。
更新
如果可以的话，我建议使用一个 css 类和一个单独的样式表。例如
<tr class="bordered"></tr>
tr.bordered
border-bottom: 1px solid #000;
【讨论】：
我不会使用内联样式，而是使用类。 我个人会使用一个类。但是对于刚开始开发电子邮件的人来说，无论哪种方式都有效 + 内联样式更容易学习 我不认为 tr 可以直接采用边框样式。见这里：***.com/questions/10040842/… TR 无法获得边框样式。不知道为什么这是公认的答案，这应该行不通。 这个答案确实有效，但并未说明这只适用于设置为collapse 的 border-collapse 规则。【参考方案2】：
在行之间添加水平线的最佳方法是使用 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 年，但现在已经不是了。【参考方案3】：您可以为您的“分隔”<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>
参见示例https://jsfiddle.net/64nydcfu/1/
【讨论】：
TRs 无法获取边框样式。 另一件使这个答案几乎与其他答案一样的事情是，除非表格上有border-collapse:collapse 样式，否则边框可能会看起来被破坏。我赞成已经包含此内容的答案，但感谢您做出调整。我删除了反对票。【参考方案4】：你可以试试这个，效果很好：
<tr>
<td colspan="Number of columns">
<hr>
</td>
</tr>
【讨论】：
像魅力一样工作。【参考方案5】：您不能将任何不是表格行的内容放在表格主体中。
相反，您应该为需要下划线的行指定一个类，这样您就可以在样式表中设置它们的底部边框。
【讨论】：
【参考方案6】：我知道这个帖子已经有一段时间没有被触及了，但我遇到了这个可能的解决方案？
例如，如果使用 2 列表，请使用 <td colspan="2"></td>。它将跨越两列的两个单元格，无需任何额外的 CSS。
<tr>
<td>data<td>
<td>data2</td>
</tr>
<td colspan="2"></td>
拜托了，这是我第一次发帖！ :)
【讨论】：
您提供的解决方案仅创建一个跨越两列的单元格。 OP 的问题是要求 一种创建水平线来分隔表格中每一行的方法。 如果你把那个多列单元格放在一个新的放在这个单元格中，你会得到一条横穿表格的水平线。 （从技术上讲，您将创建一个仅包含一条水平线的新行。）对于 OP 的问题，它仍然是一个糟糕的解决方案，但在一些更有限的情况下可能有用。
你想在 tr 元素上加一个边框。 Hr 是一个水平规则，而不是边界，不应该被用作一个。
http://jsfiddle.net/RhaqJ/
tr
border-bottom: 1px solid #000;
<table cellpadding="0" cellspacing="0" >
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
</table>
【讨论】：
【参考方案8】：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>
【讨论】：
【参考方案10】：你可以使用边框，但是如果你想创建一个 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>【讨论】：
以上是关于在表格中使用 <hr> 标签？的主要内容，如果未能解决你的问题，请参考以下文章