固定 table 布局，具有可缩放的受控列宽

Question

我想显示一个包含五列的 html table。第一个应该是 100px 宽，接下来的两个应该是灵活的，最后两个应该是 200px。当没有足够的 space 可用时，table 不应水平滚动，而是收缩列并隐藏溢出文本（在 header 和 body 单元格中）。像这样：

<table>
  <thead>
    <tr>
      <th style="width: 100px">First column</th>
      <th>Second column</th>
      <th>Third column</th>
      <th style="width: 200px">Fourth column</th>
      <th style="width: 200px">Fifth column</th>
    </tr>
  </th>
  ...body...
</table>

如果 table 的可用 space 是 800px，则列应具有以下内容：[100px, 150px, 150px, 200px, 200px]（分发两个流体柱额外 300）

但是，如果没有足够的 space 来填充给定的尺寸，流体列应该有一个最小宽度（这样它们就不会被完全隐藏），其他列应该同样缩小！就像 400px 的可用宽度和 50px 的流体列的最小宽度一样，列应该是 [60px, 50px, 50px, 120px, 120px].

我已经非常接近一个可行的解决方案，有很多不同的尝试，包括 table-layout: fixed、table-layout: auto 的各种组合，在 header 单元格上设置请求的宽度max-width 和 width，只有 width，在单元格上设置 max-width: 0 和一些其他技巧。但是总有一些问题，比如：

有时，header 单元格不会缩小到小于其单元格中文本的大小
有时，body 单元格不会缩小到小于其单元格中文本的大小
有时，它会超出可用宽度（使整个水平滚动table）
有时，当可用宽度较小时，单元格会缩小，但没有给定宽度要求的不同单元格之间的比例。
其他一些奇怪的案例。

有什么建议吗？

编辑：

一些例子：

https://jsfiddle.net/pLx50vqz/7/ - 似乎在 FireFox 和 Chrome 中提供相同的结果。固定列（第一、第四和第五）具有给定的 width，但当可用 space 小于宽度总和时它不会收缩，而其他两列（第二和第三）忽略 min-width 并在没有足够 space 可用时收缩。

https://jsfiddle.net/pLx50vqz/12/ - 当宽度有限时，列会很好地收缩，但它会忽略 max-width，因此当可用宽度较高时列会变大，并且会忽略列之间的缩放（相同宽度）

Answer 1

这是我的最终答案，Bootstrap带有 xs 的列。 xs 的大小为 768px 或更小。它应该自动根据需要自动调整。在 table 中编码并不容易，所以我创建了完整的 table 小心每一个都有一个 td 否则它不会正确排列。

<!DOCTYPE html>
<html>
<head>
<style> 
</style>

</head>
<body>

<table class="table">
<thead>
    <tr>
      <th style="text-align: left";>First column</th>
      <th style="text-align: left";>Second column</th>
      <th style="text-align: left";>Third column</th>
      <th style="text-align: left";>Fourth column</th>
      <th style="text-align: left";>Fifth column</th>
    </tr>   
<tbody>
<div class="row">
        <td>
            <div class="col-xs-2">Lorem ipsum dolor sit amet</div>
        </div>
       </td>
        <td>
            <div class="col-xs-1">Lorem ipsum</div>
        </div>
         </td>
        <td>
        <div class="">
            <div class="col-xs-1">Lorem ipsum</div>
        </div>
        </td>
        <td>
            <div class="">
            <div class="col-xs-4">Lorem ipsum dolor sit amet, consectetur adipiscing elit</div>
        </div>
        </td>
        <td>
        <div class="">
            <div class="col-xs-4">Lorem ipsum dolor sit amet, consectetur adipiscing elit</div>
        </div>
        </td>
    </tr>
</tbody>
</table>

</body>
</html>

Answer 2

我不确定在 table-tags 上使用 grid-css 的标准化程度如何，但它比所有正常的 table-display-examples 更能达到预期的效果 I尝试过。对这个解决方案有什么想法吗？浏览器支持等..

table {
  display: grid;
  grid-template-columns: minmax(30px, 100px) minmax(30px, 1fr) minmax(30px, 1fr) minmax(30px, 200px) minmax(30px, 200px);
}

完整示例：https://jsfiddle.net/fhcz51u7/

固定 table 布局，具有可缩放的受控列宽

Fixed table layout, with controlled column widths that scales

html

css

html-table