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 specifications完全符合它：

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

和

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

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

Answer 2

如果使用常量行宽，可以使用colspan将某些行的所有单元格合并为一个单元格，然后在其中创建一个新表格，其中包含您选择的背景颜色的单独边框。 / p>

Answer 3

由于这个原因，带有cellspacing的

table-collapse: separate很糟糕。你可能最好折叠边框并在CSS中手动填充单个单元格。

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

3 个答案: