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

Question

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

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

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

通过添加表格布局：固定；在表格中，我能够获得灵活宽度的列，使其全部具有相同的宽度，但是然后表格会忽略 td 的最小宽度属性。

如果我删除表格布局：固定，则最小宽度有效，但灵活宽度列都有不同的宽度（基于它们包含的文本的长度）。

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

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

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

Answer 1

我的解决方法是将表格挤压到列几乎重叠的位置，检查该点的表格宽度，并将

<table>

元素本身的最小宽度设置为该值。如果您有一个可扩展列的固定布局，则此技术也很有用，否则扩展列将随着窗口缩小而完全消失。

例如：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>

Answer 4

@an-angular-dev 提出了一个更好的绝妙技巧，你可以在这里找到它：

https://css-tricks.com/faking-min-width-on-a-table-column/