Question

我试过了：

.bb {
    border-bottom:1px;
}

<tr class="bb">

但完全没有效果。

Answer 1

请尝试以下方法：

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

Answer 2

将border-collapse:collapse添加到表格中。

示例：

table.myTable{
  border-collapse:collapse;
}

table.myTable tr{
  border:1px solid red;
}

这对我有用。

Answer 3

您应该在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>

Answer 4

tr td 
{
    border-bottom: 2px solid silver;
}

或者如果你想要TR标签内的边框，你可以这样做：

tr td {
    box-shadow: inset 0px -2px 0px silver;
}

Answer 5

我想在这里说的就像@Suciu Lucian的回答一样。

我遇到的奇怪情况是，当我在我的文件中应用@Suciu Lucian的解决方案时，它适用于Chrome但不适用于Safari（并且没有在Firefox中试用）。在我研究了w3.org发布的guide of styling table border之后，我找到了另类的东西：

table.myTable{
  border-spacing: 0;
}

table.myTable td{
  border-bottom:1px solid red;
}

是的，您必须设置td的样式而不是tr。

如何指定一个底边框？

5 个答案: