在表中使用<hr>标签？

我有一个表格的边框在CSS中设置为“none”。不过，我想在桌子上放一条水平线来分隔每一行。我曾尝试将<hr>标记放置在每个<td> </td>标记之间，但是它会在每列之间打印出一条水平的黑线和小的空白。在表中使用<hr>标签？

是否有任何方法使用不同的方法在表格内打印水平线？

2011-12-15 user979150

编号建议把：

<tr style="border-bottom: 1px solid #000;">

你想要的线路上的每一行。您也可以为每个单元单独执行此操作。

更新

编号建议使用一个CSS类，如果你能有一个独立的样式表。例如

<tr class="bordered"></tr> 

tr.bordered { 
    border-bottom: 1px solid #000; 
}

来源

2011-12-15 15:21:54 Undefined

我不会用内联样式去，而是使用类来代替。 – SpaceBeers 2011-12-16 15:03:12

我会亲自使用一堂课。但是无论哪种方式+内联样式对于开始开发电子邮件的人来说更容易学习 – Undefined 2011-12-16 16:40:26

我不认为tr可以直接采用边框样式。看到这里：http://stackoverflow.com/questions/10040842/add-border-bottom-to-table-row-tr – Beachhouse 2014-07-30 21:46:28

您不能将任何不是表格行的东西放在表格的正文中。

相反，您应该给需要下划线的行分配一个类，以便您可以在样式表中设置底部边框的样式。

来源

2011-12-15 15:20:51 GordonM

你想在tr元素上放一个边框。 Hr是一个水平规则，不是边界，不应该被用作一个。

http://jsfiddle.net/RhaqJ/

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>

来源

2011-12-15 15:23:20 SpaceBeers

noshade="noshade"属性帮助您去除阴影和一些想法可以从this link发现，我的意思是基于CSS的HR线。

和表基于风格像

.bottomborder { 
    border-bottom: 1px solid #CECECE; 
} 

<td class=border-bottom>

继不起作用

<tr class=border-bottom>

来源

2011-12-15 15:25:27

您可以定义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>

然后，只需标记所需行数：

<tr> 
     <td> 
     <td> 
</tr> 
<tr class="separated"> 
     <td> 
     <td> 
</tr> 
<tr> 
     <td> 
     <td> 
</tr>

见例如https://jsfiddle.net/64nydcfu/1/

来源

2011-12-15 15:26:53 DRCB

添加行之间的水平线是一个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。

来源

2011-12-15 15:29:29 marcianx

我知道这个线程在一段时间内没有被触及，但是我遇到了这种可能的解决方案？

例如，如果使用2列表，请使用<td colspan="2"></td>。它将跨越两列的两个单元格，节省了对任何额外CSS的需求。

<tr> 
<td>data<td> 
<td>data2</td> 
</tr> 
<td colspan="2"></td>

请好，这是我的第一篇文章！ :)

来源

2017-03-19 22:20:50 PastyAndPeas

在表中使用<hr>标签？

回答

相关问题