Question

我有一个带有边框的表，在CSS中设置为“none”。但是，我想在表格上放一条水平线来分隔每一行。我尝试在特定行的每个<hr>标记之间放置<td> </td>标记，但它会打印一条水平黑线，每列之间有一些小的空格。

有没有办法用不同的方法在表格中打印水平线？

Answer 1

我建议推荐：

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

在您希望该行开启的每一行上。您也可以为每个单元格单独执行此操作。

<强>更新

我建议使用css类，如果可以的话，还有一个单独的样式表。例如

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

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

Answer 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。

Answer 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/

Answer 4

您不能在表格的正文中放置任何不是表格行的内容。

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

Answer 5

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

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

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

请好，这是我的第一篇文章！：）

Answer 6

您想在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>

Answer 7

noshade="noshade"属性可以帮助您删除阴影，可以从this link找到更多想法，我的意思是基于CSS的HR线。

和基于表格的风格一样

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

<td class=border-bottom>

以下无效

<tr class=border-bottom>

Answer 8

您可以尝试一下，它运行良好：

<tr>
    <td colspan="Number of columns">
        <hr>
    </td>
</tr>

Answer 9

您要做的就是将水平规则作为新行放入而没有特定的CSS样式，这将为您做到这一点并且非常容易实现。希望这会有所帮助！

<tr>
    <td>
        <hr>
    </td>
</tr>

Answer 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 />标签？

10 个答案: