html - 表格行边框在 Firefox 和 Safari 中不起作用

Question

我希望表格行在底部和顶部有一个边框。下面的代码在 IE 中有效，但在 Firefox 或 Safari 中无效！请帮忙！

HTML

 <tr class='TableRow'>

CSS

.TableRow{
   border-bottom: 2px solid rgb(167,167,167);
   border-top: 2px solid rgb(167,167,167);
  }

Answer 1

据我所知，您不能通过 CSS 为表格行设置边框。但我会建议您解决此问题：将边框设置为行内的单元格，然后使用 cellspacing="0"。这是CSS：

.TableRow td{
   border-bottom: 2px solid rgb(167,167,167);
   border-top: 2px solid rgb(167,167,167);
}

一个示例 HTML 将是：

<table cellspacing="0">
    <tr class="TableRow">
        <td>A</td>
        <td>B</td>
    </tr>
    <tr>
        <td>C</td>
        <td>D</td>
    </tr>
</table>

第一行将是带边框的行。

希望有帮助。

编辑：我试过你的代码并没有在任何浏览器中显示边框，包括 IE。

Answer 2

添加border-collapse:collapse到表格中，然后您可以为 tr 添加边框。

例子：

table.myTable{
  border-collapse:collapse;
}

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

Answer 3

这能解决您的问题吗？

tr.TableRow td {
  border-bottom: 2px solid rgb(167,167,167);
  border-top: 2px solid rgb(167,167,167);
}

它将为具有 class 的任何行中的所有表数据添加边框TableRow。在开始时添加tr.是一种很好的做法，因为我假设您只会将此类与表格行一起使用。

如果您将其应用于多行 - 您可能还需要添加border-collapse:collapse;将边框折叠成单个边框。