Html 在表格中使用 <hr> 标签？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/8522337/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Using an <hr> tag with a table?
提问by user979150
I have a table with borders that are set to "none" in CSS. However, I want to put a horizontal line separating each row on the table.
I have tried placing <hr>tags in between each <td> </td>tag for a particular row, but it prints a horizontal black line with small white spaces between each column.
我有一个表格，其边框在 CSS 中设置为“无”。但是，我想在桌子上放置一条水平线来分隔每一行。我曾尝试<hr>在<td> </td>特定行的每个标签之间放置标签，但它会在每列之间打印一条带有小空白的水平黑线。
Is there any way to print a horizontal line within a table using a different method?
有没有办法使用不同的方法在表格中打印水平线？
回答by Undefined
I'd suggest putting:
我建议把：
<tr style="border-bottom: 1px solid #000;">
on every row you want the line to be on. You can also do this individually for each cell.
在您希望该行所在的每一行上。您也可以为每个单元格单独执行此操作。
Update
更新
Id recommend using a css class and a have a separate stylesheet if you can. For example
如果可以，我建议使用 css 类并使用单独的样式表。例如
<tr class="bordered"></tr>
tr.bordered {
border-bottom: 1px solid #000;
}
回答by marcianx
The best way to add a horizontal line between rows is with a CSS borders. First, you want to collapse all the borders of the table so that there is no space between the cells (this might help your solution as well, but I don't recommend using hr for this purpose). Next, specify a border on the bottom-side of each cell (td). You can similarly put borders to the left, right, up, etc. See the self-contained HTML below.
在行之间添加水平线的最佳方法是使用 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>
For more border options, check this w3Schools page.
有关更多边框选项，请查看此 w3Schools 页面。
回答by DRCB
You can define a CSS class for your 'separated' <tr>:
您可以为您的 'separated' 定义一个 CSS 类<tr>：
<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>
Then just mark required rows:
然后只需标记所需的行：
<tr>
<td>
<td>
</tr>
<tr class="separated">
<td>
<td>
</tr>
<tr>
<td>
<td>
</tr>
See example https://jsfiddle.net/64nydcfu/1/
回答by PastyAndPeas
I know this thread hasn't been touched in a while but I came across this possible solution?
我知道这个线程有一段时间没有被触及，但我遇到了这个可能的解决方案？
For example, if using a 2 column table, use <td colspan="2"></td>. It will span two cells across the two columns, saving the need for any additional CSS.
例如，如果使用 2 列表，请使用<td colspan="2"></td>. 它将跨越两列的两个单元格，从而无需任何额外的 CSS。
<tr>
<td>data<td>
<td>data2</td>
</tr>
<td colspan="2"></td>
Please be nice this is my first ever post! :)
请善待，这是我第一次发帖！:)
回答by GordonM
You can't put anything that isn't a table row inside a table's body.
您不能将任何不是表格行的内容放入表格正文中。
You should, instead, give a class to the rows that need underlining so you can style them to have a bottom border in your stylesheet.
相反，您应该为需要下划线的行指定一个类，以便您可以将它们设置为样式表中的底部边框。
回答by SpaceBeers
You want to put a border on the tr element. Hr is a Horizonal Rule, not a border and shouldn't be used as one.
您想在 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>
回答by Ran Alcobi
You can try this, it is working perfectly:
你可以试试这个，它工作得很好：
<tr>
<td colspan="Number of columns">
<hr>
</td>
</tr>
回答by Maurice A. Bonal
All you have to do is to put in a horizontal rule as a new row with no specific Css styling and it will do this for you and very easy to implement. Hope this helps!
您所要做的就是在没有特定 Css 样式的情况下将水平线作为新行放入，它会为您完成此操作并且非常容易实现。希望这可以帮助！
<tr>
<td>
<hr>
</td>
</tr>
回答by Sameera Thilakasiri
noshade="noshade"attribute help you to remove the shadow and some more idea can be found from this link, I mean CSS based HR line.
noshade="noshade"属性可以帮助您去除阴影，并且可以从此链接找到更多想法，我的意思是基于 CSS 的 HR 线。
And Table based style like
和基于表格的风格
.bottomborder {
border-bottom: 1px solid #CECECE;
}
<td class=border-bottom>
Following doesn't work
跟随不起作用
<tr class=border-bottom>
