如何在之間分配可用空間<table>列均勻？
[英]How to distribute free space between <table> columns evenly?
問題描述
我想我的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>
1 個解決方案
解決方案1
2 2021-10-29 13:46:27
一個可能有點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>
如何在帶有嵌套flexbox的flexbox子項之間平均分配寬度？
[英]How to evenly distribute width between flexbox children with nested flexboxes?
是否可以均勻分布寬度等於其內容的表格列？
[英]Is it possible to evenly distribute table columns who's width is equal to its content?
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.