我想让我的 html 表格以th元素内容不重叠的方式占据整个窗口宽度 + 列标题之间有均匀的间距（见图）。空间必须随着窗口宽度最大为 0 缩放（所有单词都相互拥抱）。怎么做？

大屏幕示例：

时间戳

首页 > 解决方案 > 如何在列之间平均分配可用空间？

我想让我的 html 表格以th元素内容不重叠的方式占据整个窗口宽度 + 列标题之间有均匀的间距（见图）。空间必须随着窗口宽度最大为 0 缩放（所有单词都相互拥抱）。怎么做？

大屏幕示例：

html - 如何在列之间平均分配可用空间？

我想让我的 html 表格以th元素内容不重叠的方式占据整个窗口宽度 + 列标题之间有均匀的间距（见图）。空间必须随着窗口宽度最大为 0 缩放（所有单词都相互拥抱）。怎么做？

大屏幕示例：

问题描述

我想让我的 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>

您可以使用 LAG 功能。

SELECT 
 ... 
 , LAG(ValueYouWishToUse, 1,0) OVER (ORDER BY YEAR(OrderByColumnName)) AS PreviousValue
FROM
 ...
WHERE
 ...

请参阅此以获取更多信息。

标签： htmlcsshtml-table

解决方案

一个可能有点 hacky 的唯一 css 解决方案是插入空的 th/td 元素并为它们提供 100%/填充列的实际宽度。这里 4 列 -> gap-width: 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>

推荐阅读