表列与表布局重叠固定

Question

当表格设置了 'table-layout: fixed' CSS 属性时，我的表格列重叠时遇到了一点问题。

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

当我删除“table-layout:fixed”（所以它默认为自动）时，这不会发生。但这是不可取的，因为在 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>