表布局：固定忽略 td 的最小宽度

Question

我有一个项目需要一个包含固定宽度和灵活宽度列的表格。

无论浏览器的宽度是多少，某些列的宽度始终需要为 80px。

其余列需要具有灵活的宽度，但全部具有相同的宽度，最小宽度为 75px；

通过添加 table-layout:fixed;在表格中，我能够获得灵活宽度的列，使其全部具有相同的宽度，但是然后表格会忽略 td 的 min-width 属性。

如果我删除 table-layout:fixed，则最小宽度有效，但灵活宽度列都有不同的宽度（基于它们包含的文本的长度）。

列数根据从数据库中提取的数据而变化。

我在 jsfiddle 上放置了带有 table-layout:fixed 和 min-width 的表格示例： http://jsfiddle.net /7d2Uj/

有什么想法如何让最小宽度在这种情况下工作，或者为什么会发生这种情况？

Answer 1

我的解决方法是将表格挤压到列几乎重叠的位置，检查该点的表格宽度，并将 元素本身的最小宽度设置为该值。如果您有一个可扩展列的固定布局，则此技术也很有用，否则扩展列将随着窗口缩小而完全消失。

例如： http://jsfiddle.net/KTCfs/

Answer 2

对于固定宽度的列，您需要使用 width，而不是 min-width，并且您应该将剩余列的宽度设置为基于列数的百分比。在您的例子中，您有 6 列，因此我将其设置为 16.66%。

工作示例： http://jsfiddle.net/6vw66/

Answer 3

我在其他资源上找到的解决方案：

1. 在流体列之后添加额外的列到第一行
2. ，在标题（固定部分）设置流体列的 width 样式
3. 设置属性 colspan="2 “ 位于正文中的流体列上（将使用第一行中的额外列来自动调整空间）

之前（不起作用）：

<table>
  <tr>
    <th style="min-width: 100px">col-1</th>
    <th style="width: 200px">col-2</th>
  </tr>
  <tr>
    <td>col-1 content</td>
    <td>col-2 content</td>
  </tr>
</table>

之后：

<table>
  <tr>
    <th style="width: 100px">col-1</th> <!-- 2. -->
    <th><!--special column--></th>      <!-- 1. -->
    <th style="width: 200px">col-2</th>
  </tr>
  <tr>
    <td colspan="2">col-1 content</td>  <!-- 3. -->
    <td>col-2 content</td>
  </tr>
</table>