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);
}

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

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

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

3 个答案: