Html 边框折叠时设置行或列而不是单元格的样式：分隔

我有一张桌子，出于其他原因，我更喜欢保持桌子折叠：分开。但是，我希望能够突出显示单个行或列。不幸的是，应用于

或

标记的任何样式似乎只适用于单元格，而不适用于单元格之间的空间。例如：

<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>

td{宽度：10px；高度：10px；}

结果显示一个紫色表格，其中有5个垂直单元格和5个水平单元格填充颜色，但不包括整行或整列

---

除了使用边框折叠：折叠填充给定行或列中单元格之间的空间外，我还有其他选择吗？

如果使用固定行宽，可以使用

colspan

将某行的所有单元格合并为一个单元格，然后在表格中创建一个新表格，表格中有单独的边框和您选择的背景色。

不使用

边框折叠：单独的
，表格的状态正好：

请注意，如果表格具有“border collapse:separate”，则“border spacing”属性给出的区域背景始终是表格元素的背景。看

以及：

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

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




表格折叠：由于这个原因，用单元格间距分隔有点糟糕。你最好在CSS中折叠边框并手动填充单个单元格。
边框间距是否也是禁止的？设置
边框间距：0
可能会比
边框折叠：折叠
看起来更好一些，但仍然不理想。有趣的是，我没想到。是的，我的细胞是固定的高度和宽度，所以它可能会工作。虽然很难看，但大多数html最终都很难看。。。