表格列重叠与表格布局固定

Question

当表格的'table-layout：fixed'设置为CSS属性时，我的表格列重叠有点问题。

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

当我拿走'table-layout：fixed'（因此它默认为auto）时，这不会发生。但这是不可取的，因为在IE7这样的旧浏览器中，与IE8和更现代的浏览器不同，页面渲染效果不佳。

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

http://jsfiddle.net/hGzQu/

非常感谢任何见解。

Answer 1

使用col元素和table-layout:fixed来避免float和min-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>