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

use*_*569 1 html css

我希望在每行数据之后绘制一条水平线

<!DOCTYPE html>
<html>
<body>
<table>
    <tr>
        <td>
          data a
        </td>
    </tr>
    <hr/>
    <tr>
        <td>
          data b
        </td>
    </tr>
</table>
</body>
</html>
Run Code Online (Sandbox Code Playgroud)

但我的代码输出是这样的

 __________________________________________________________
 data a
 data b
Run Code Online (Sandbox Code Playgroud)

期待结果

 data a
 __________________________________________________________
 data b
Run Code Online (Sandbox Code Playgroud)

另外的问题

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

 .styletr {border-bottom: 1px solid black;} 
Run Code Online (Sandbox Code Playgroud)

然后

  <tr class=styletr>
  </tr>
Run Code Online (Sandbox Code Playgroud)

Jos*_*eam 6

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

tr {
    border-bottom: 1px solid #000;
}
Run Code Online (Sandbox Code Playgroud)

对于您的代码,该hr元素使用起来没有意义.


Ozz*_*rnz 6

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

<html>
<head>
<link href="YourCss.css" rel="stylesheet" type="text/css" />
</head>
<body>
...
</body>
</html>
Run Code Online (Sandbox Code Playgroud)

在"YourCss.css"中:

tr { border-bottom: 1px solid black; }
Run Code Online (Sandbox Code Playgroud)

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

tr:not(:last-child) { border-bottom: 1px solid black; }
Run Code Online (Sandbox Code Playgroud)

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

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

.seperator { border-bottom: 1px solid black; }
Run Code Online (Sandbox Code Playgroud)


dot*_*NET 5

<hr />不再用作HTML5中两个html节之间的物理分隔符(请参阅此内容).相反,它现在是一个逻辑分离.你可以border改用.