边框折叠时样式行或列而不是单元格：单独 [英] Style row or column rather than cells when border-collapse: separate

问题描述

我有一张桌子，由于其他原因，我更喜欢保持桌面折叠：分开。但是，我希望能够突出显示单个行或列。不幸的是，似乎应用于< tr> 或< col> 标签的任何样式仅适用于细胞，而不是它们之间的空间。例如：

I have a table which for other reasons I prefer to keep table-collapse: separate. However, I would like to be able to highlight an individual row or column. Unfortunately, it seems that any style applied to the <tr> or <col> tags only applies to the cells, not the space between them. For instance:

<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个水平单元格，但是不是整行或者列。

results in a purple table with 5 vertical cells and 5 horizontal cells filled with color but not the entire row or column.

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

Do I have any option besides using border-collapse: collapse to fill in that space between cells in a given row or column?

推荐答案

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

If you use constant row width, you can use colspan to merge all cells of some row into one single cell, and then create a new table in it with separate borders with the background color of your choice.

这篇关于边框折叠时样式行或列而不是单元格：单独的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！