风格行或列而不是单元格时边框合拢：单独

Question

我有一个表，其他原因，我宁愿保持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之外，我还有其他选择：折叠以填充给定行或列中单元格之间的空间吗？

Answer 1

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

Answer 2

不与border-collapse: separate，该W3C specifications张祖兴它到底：

注意，如果表中有“边界崩溃：独立”，由“边界间距”给出的区域的背景属性始终表格元素的背景。请参阅separated borders model。

和：

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

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

• Table CSS properties
• Table column CSS properties

Answer 3

table-collapse: separate与CELLSPACING还挺吮吸这个原因。您可能会更好地折叠边框并手动填充CSS中的单个单元格。