表格行边框在 Firefox 和 Safari 中不起作用答案

【问题标题】：Table row border doesn't work in Firefox and Safari表格行边框在 Firefox 和 Safari 中不起作用
【发布时间】：2012-05-01 07:42:55
【问题描述】：

我希望表格行的底部和顶部都有边框。下面的代码在 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);
  }

【问题讨论】：

标签： html css html-table border tablerow

【解决方案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）中显示边框。

【讨论】：

只有在我给我的<table> 一个border-collapse: separate 的CSS 声明后，这才对我有用。

【解决方案2】：

这能解决您的问题吗？

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

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

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

【讨论】：

【解决方案3】：

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

例子：

table.myTable{
  border-collapse:collapse;
}

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

【讨论】：