时间戳

首页 > 解决方案 > 固定表格布局，具有可缩放的受控列宽

html - 固定表格布局，具有可缩放的受控列宽

问题描述

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

<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>

如果表格的可用空间是800px，那么列应该得到以下内容：（[100px, 150px, 150px, 200px, 200px]在两个流体列上分配额外的 300）

但是，如果没有足够的空间来填写给定的尺寸，流体列应该有一个最小宽度（所以它们不会完全隐藏起来），并且其他列应该按比例缩小！就像如果可用宽度为400 像素，流体列的最小宽度为50 像素，列应该是[60px, 50px, 50px, 120px, 120px].

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

有什么建议么？

编辑：

一些例子：

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

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

标签： htmlcsshtml-table

解决方案

这是我的最终答案是用 xs 引导列。xs 的大小为 768px 或更小。它应该会根据需要自动调整。在表格内编码并不容易，所以我创建了完整的表格，请注意每一个都有一个 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>

推荐阅读