fixed - 表列与表布局重叠固定

Question

当表格设置了“表格布局：固定”CSS属性时，我的表格列重叠时遇到了一些问题。

左侧的列是响应式的，设置了最小宽度。右边的列的宽度是固定的，并且是向右浮动的。当浏览器调整大小时，右列开始与左列重叠，忽略其最小宽度。

当我拿走“表格布局：固定”（所以它默认为自动）时，这不会发生。但这是不可取的，因为在像 IE7 这样的旧浏览器中，该页面的渲染效果不是很好，这与 IE8 和更现代的浏览器不同。

我已经设置了一个基本示例（非常精简）来演示这个问题。看看下面的链接。

http://jsfiddle.net/hGzQu/

非常感谢任何见解。

Answer 1

使用col元素 with来避免和table-layout:fixed的并发症：floatmin-width

<table>
  <colgroup>
    <col width="0*"><!--min-width equivalent-->
    <col width="30"><!--fixed width column-->
  </colgroup>
  <tr>
    <td>foo</td>
    <td>bar</td>
  </tr>
</table>