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

【问题标题】：table-layout: fixed ignores td's min-width表格布局：固定忽略 td 的最小宽度
【发布时间】：2011-10-24 13:01:58
【问题描述】：

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

无论浏览器的宽度如何，某些列的宽度始终需要为 80 像素。

其余的列需要是灵活的宽度，但都是等宽，最小宽度为75px；

通过添加 table-layout:fixed;到表格我可以让灵活的宽度 cols 都具有相同的宽度，BUT 然后表格忽略 td 的 min-width 属性。

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

列数因从 db 中提取的数据而异。

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

任何想法如何让 min-width 在这种情况下工作，或者为什么会发生这种情况？

【问题讨论】：

标签： css css-tables tablelayout

【解决方案1】：

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

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

【讨论】：

【解决方案2】：

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

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

【讨论】：

您好，感谢您的回答。我同时使用了 width 和 min-width ，因为当我在放入 table-layout:fixed 之前缩小浏览器窗口时，它可以防止 col 折叠。我尝试取出 min-width 并只保留宽度，但是似乎没有改变任何东西。不幸的是，列数会根据数据库中的数据而变化，因此我无法在静态 css 中将宽度计算为 %。写这篇文章我现在意识到一个选择可能是通过 PHP 基于 col num 动态构建 css，这是我以前没有想到的。也许这就是我需要做的。
最终结果是我创建了一个动态生成的 css 规则来设置每个灵活宽度列的宽度百分比，具体取决于列的总数。不理想，但它正在工作。

【解决方案3】：

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

在第一行的流体列之后添加额外的列
在表头设置width流柱样式（固定部分）
在正文中的流体列上设置属性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>

【讨论】：