在边框合拢时设置行或列的样式而不是单元格:单独(Style row or column rather than cells when border

编程入门 行业动态 更新时间:2024-10-23 19:18:18
边框合拢时设置行或列的样式而不是单元格:单独(Style row or column rather than cells when border-collapse: separate)

我有一张表,由于其他原因,我宁愿保持表崩溃:分开。 但是,我希望能够突出显示单个行或列。 不幸的是,应用于<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之外,我还有其他选择:折叠以填充给定行或列中单元格之间的空间吗?

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>

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

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.

更多推荐

本文发布于:2023-07-22 10:02:00,感谢您对本站的认可!
本文链接:https://www.elefans.com/category/jswz/34/1219187.html
版权声明:本站内容均来自互联网,仅供演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系,我们将在24小时内删除。
本文标签:边框   单元格   样式   而不是   Style

发布评论

评论列表 (有 0 条评论)
草根站长

>www.elefans.com

编程频道|电子爱好者 - 技术资讯及电子产品介绍!