如何指定<tr>的下边框?

omg*_*omg 20 html css

我试过了 :

.bb {
    border-bottom:1px;
}

<tr class="bb">
Run Code Online (Sandbox Code Playgroud)

但根本没有效果.

Dav*_*res 36

请尝试以下方法:

<html>
 <head>
  <title>Table row styling</title>
  <style type="text/css">
    .bb td, .bb th {
     border-bottom: 1px solid black !important;
    }
  </style>
 </head>
 <body>
  <table>
    <tr class="bb">
      <td>This</td>
      <td>should</td>
      <td>work</td>
    </tr>
  </table>
 </body>
</html>
Run Code Online (Sandbox Code Playgroud)

  • 你不能设置`<tr>`的样式,因为它只是一个"逻辑分组元素",但它实际上并没有被渲染.你只能在`<tr>`里面设置`<td>`或`<th>`元素的样式.确保你有一些. (57认同)
  • style ="border-bottom:solid 1px black!important;" 在td为我工作.但是我不得不添加style ="border-collapse:collapse;" 到表格以便不在相邻单元格的边界之间获得间隙. (4认同)

小智 24

添加border-collapse:collapse到表中.

例:

table.myTable{
  border-collapse:collapse;
}

table.myTable tr{
  border:1px solid red;
}
Run Code Online (Sandbox Code Playgroud)

这对我有用.

  • 这应该是公认的答案.将边框放在表格单元格上会使其中断. (4认同)

Era*_*lel 6

您应该在td元素上定义样式,如下所示:

<html>
<head>
    <style type="text/css">
        .bb
        {
            border-bottom: solid 1px black;
        }
    </style>
</head>
<body>
    <table>
        <tr>
            <td>
                Test 1
            </td>
        </tr>
        <tr>
            <td class="bb">
                Test 2
            </td>
        </tr>
    </table>
</body>
</html>
Run Code Online (Sandbox Code Playgroud)

  • 这是一个很好的方法.我唯一要提醒的是,html渲染的大小将与表中的TD元素数量成比例增长.如果大小是一个问题,我们将通过将表元素本身定位为表#idForTable tr td {border-bottom:1px solid black}来更有效.整个行集的一个子句. (3认同)