html 绘制水平线

【问题标题】：drawing a horizontal line using <hr/> html使用 <hr/> html 绘制水平线
【发布时间】：2014-01-31 18:09:27
【问题描述】：

我想在每行数据之后画一条水平线

<!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>

【问题讨论】：

Using an <hr> tag with a table?的可能重复

标签： html css

【解决方案1】：

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

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

就您的代码而言，hr 元素无法使用。

【讨论】：

【解决方案2】：

试试这个：

    <td>
      <hr />
    </td>

如果是电子邮件内容

【讨论】：

【解决方案3】：

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

【讨论】：

【解决方案4】：

将除<tr>、<thead> 或<tbody> 之外的任何内容作为<table> 元素的直接子元素放入<html> 是无效的。

相反，也许尝试添加css：

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

【讨论】：

@BalvantAhir 不同的电子邮件引擎支持不同的 html/css/... 并且有自己的怪癖。自从我为电子邮件编写标记以来已经有一段时间了，但它可能会在元素上内联这个 CSS。即：<tr style="border-bottom: 1px solid black;">...
当我使用：它不起作用...但是有效....

【解决方案5】：

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

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

（如果您有更多列，请像这样使用 colspan）

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

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

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

【讨论】：

【解决方案6】：

我认为你不能在表格中使用 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; }

【讨论】：

如果假设我有几行表格但有些行不需要水平线我可以做类似 .styletr {border-bottom: 1px solid black;} 然后 ?
找准，将一个类添加到您要设置样式的中，然后在 css 中使用该类。