html - border-collapse : separate 样式行或列而不是单元格

Question

我有一张 table ，由于其他原因，我更喜欢将 table-collapse: 分开。但是，我希望能够突出显示单个行或列。不幸的是，似乎任何样式都适用于 <tr>或 <col>标签仅适用于单元格，不适用于它们之间的空间。例如:

<style>
  td { width: 10px; height: 10px; }
</style>
<table style="background-color: purple">
  <colgroup>
    <col span="2">
    <col style="background-color: red;">
    <col span="2">
  <colgroup>
  <tr><td><td><td><td><td></tr>
  <tr><td><td><td><td><td></tr>
  <tr style="background-color: orange;"><td><td><td><td><td></tr>
  <tr><td><td><td><td><td></tr>
  <tr><td><td><td><td><td></tr>
</table>

生成一个紫色表格，其中 5 个垂直单元格和 5 个水平单元格被颜色填充，但不是整行或整列。

除了使用 border-collapse: collapse 来填充给定行或列中单元格之间的空间之外，我还有其他选择吗？

Answer 1

不适用于 border-collapse: separate，W3C specifications准确地说:

Note that if the table has 'border-collapse: separate', the background of the area given by the 'border-spacing' property is always the background of the table element. See the separated borders model.

和:

In [the border spacing] space, the row, column, row group, and column group backgrounds are invisible, allowing the table background to show through. Rows, columns, row groups, and column groups cannot have borders (i.e., user agents must ignore the border properties for those elements).

您可能想检查表格 CSS 的浏览器兼容性:

• Table CSS properties
• Table column CSS properties