边框折叠时样式行或列而不是单元格:单独

Question

我有一张桌子,由于其他原因,我更喜欢保持桌面折叠:分开.但是,我希望能够突出显示单个行或列.不幸的是,似乎应用于<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之外,我还有其他选择:折叠以填充给定行或列中单元格之间的空间吗？

Answer 1

不包括border-collapse: separate，W3C 规范准确地说明了这一点：

请注意，如果表格具有“border-collapse：separate”，则“border-spacing”属性给出的区域的背景始终是表格元素的背景。请参阅分离边界模型。

和：

在[边框间距]空间中，行、列、行组和列组背景是不可见的，允许表格背景透过。行、列、行组和列组不能有边框（即，用户代理必须忽略这些元素的边框属性）。

您可能想检查表 CSS 上的浏览​​器兼容性：

• 表 CSS 属性
• 表格列 CSS 属性

Answer 2

如果您使用恒定行宽，则可以将colspan某一行的所有单元格合并为一个单元格，然后在其中创建一个新表格，该表格具有单独的边框和您选择的背景颜色。