Question

我想在数据的每一行之后绘制一条水平线

<!DOCTYPE html>
<html>
<body>
<table>
    <tr>
        <td>
          data a
        </td>
    </tr>
    <hr/>
    <tr>
        <td>
          data b
        </td>
    </tr>
</table>
</body>
</html>

但我的代码输出是这样的

 __________________________________________________________
 data a
 data b

期待结果

 data a
 __________________________________________________________
 data b

其他问题

如果让我说我有几个表行，但有些行不需要水平线我可以做类似的事情

 .styletr {border-bottom: 1px solid black;}

然后

  <tr class=styletr>
  </tr>

Answer 1

最常用的方法是使用CSS来设置元素的border属性，如下所示：

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

对于您的代码，使用hr元素没有意义。

Answer 2

我认为你不能在桌面内使用hr，你最好使用css：

<html>
<head>
<link href="YourCss.css" rel="stylesheet" type="text/css" />
</head>
<body>
...
</body>
</html>

并在“YourCss.css”中：

tr { border-bottom: 1px solid black; }

编辑：但是，这会在每个表格行的底部放置一个边框，包括最后一行，以排除您需要的最后一行

tr:not(:last-child) { border-bottom: 1px solid black; }

编辑2：为了更好地控制哪些行的样式，你应该使用一个类：

<tr class="seperator">...</tr>

.seperator { border-bottom: 1px solid black; }

Answer 3

<hr />不再用作HTML5中两个html部分之间的物理分隔符（请参阅this）。相反，它现在是一个逻辑分离。您可以改为使用border。

Answer 4

您不能在表格的tr标签之间放置元素。在渲染时，浏览器将简单地将其重定位到表外部。一种选择是将它放在它自己的行中，其中一个单元格跨越表格的宽度

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

（如果你有更多列使用colspan像这样）

<tr><td colspan="3"><hr /></td></tr>

或者，如果您的表中只有一列，只需将HR标记移动到标记中，使其位于单元格内。

你也可以考虑（我鼓励你）用表格行的底部边框替换HR标签，正如其他答案所暗示的那样，因为这是一种更好的设计方法。

Answer 5

将<html>，<tr>或<thead>以外的任何内容作为<tbody>元素的直接子项，无效<table>。

相反，也许可以尝试添加css：

tr { border-bottom: 1px solid black; }

Answer 6

试试这个：

    <td>
      <hr />
    </td>

如果是电子邮件内容

使用<hr /> html绘制水平线

6 个答案: