Question

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

无论浏览器的宽度如何，有些列的宽度始终必须为80px。

其余的列需要是一个灵活的宽度，但宽度相等，最小宽度为75px;

通过添加table-layout：fixed;在表格中，我能够获得所有宽度相等的灵活宽度，但，然后表格会忽略td的最小宽度属性。

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

列数根据从db。中提取的数据而有所不同。

我在表格布局中放了一个表格示例：jsfiddle上的固定和最小宽度：http://jsfiddle.net/7d2Uj/

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

Answer 1

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

Ex：http://jsfiddle.net/KTCfs/

Answer 2

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

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

Answer 3

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

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

table-layout：fixed忽略td的最小宽度

3 个答案: