如何在之间分配可用空间<table>列均匀？

Question

我想我的HTML表格采取充分窗口宽度的方式， th元素含量不重叠+有列标题之间的平均间距（见图片）。 空间必须随着窗口宽度缩放到 0（所有单词都相互拥抱）。 怎么做？

大屏幕示例：

小屏幕示例：

默认情况下之间的间距th元件获得正比于元件的宽度。

如果我使用table-layout: fixed列的宽度将相等，即它们之间的空间与宽度不成比例。

PS 我需要使用border-spacing: 0因为我需要突出显示完整的表格行并且使用正border-spacing表格背景将在单元格之间可见。 PPS 问题专门针对表格布局。 我知道我可以用网格和弹性框做任何事情，但我正在尝试为正确的内容使用正确的标签，在这种情况下，我有一个表格数据，即解决方案应该与“显示：表格”一起使用。

 table { width: 80%; background: gray; } th { text-align: left; } .auto { background: #90EE90; } .fixed { table-layout: fixed; background: #ADD8E6; }

 <table class="auto"> <thead> <tr> <th>1</th> <th>333</th> <th>999999999</th> <th>22</th> </tr> </thead> <tbody> <tr> <td>aa</td> <td>aa</td> <td>aa</td> <td>aa</td> </tr> </tbody> </table> <table class="fixed"> <thead> <tr> <th>1</th> <th>333</th> <th>999999999</th> <th>22</th> </tr> </thead> <tbody> <tr> <td>aa</td> <td>aa</td> <td>aa</td> <td>aa</td> </tr> </tbody> </table>

Answer 1

一个可能有点hacky的css解决方案是插入空的th/td元素并给它们一个实际宽度为100%/填充列的数量。 这里有 4 列 -> 间隙宽度：25%（如果是奇数，则使用 calc()）

 table { width: 80%; border-spacing: 0 } th { text-align: left; } th, td { border: 1px solid teal; } .gap { width: 25%; }

 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width"> <title>JS Bin</title> </head> <body> <table> <thead> <tr> <th>1</th> <th class="gap"></th> <th>333</th> <th class="gap"></th> <th>999999999</th> <th class="gap"></th> <th>22</th> <th class="gap"></th> </tr> </thead> <tbody> <tr> <td>aa</td> <td class="gap"></td> <td>aa</td> <td class="gap"></td> <td>aa</td> <td class="gap"></td> <td>aa</td> <td class="gap"></td> </tr> </tbody> </table> </body> </html>

如何在之间分配可用空间<table>列均匀？

问题描述

1 个解决方案

解决方案1
2 2021-10-29 13:46:27

如何在之间分配可用空间<table>列均匀？

问题描述

1 个解决方案

解决方案1 2 2021-10-29 13:46:27

解决方案1
2 2021-10-29 13:46:27