嵌套表否定了“table-layout：fixed”

Question

我正在制作表格布局，我真的需要：

• 2列，宽度可变
• 列具有相同的宽度
• 列不是必要的

我发现“table-layout：fixed”可以实现这一点，如果我将两列设置为“width：50％”。这是一个例子：

CSS：

    .mytable {
      border-collapse: collapse;
      table-layout: fixed;
    }
    .fifty {
      width: 50%;
    }

HTML：

    <table class="mytable" border=1>
        <tr>
            <td class="fifty">hello</td>
            <td class="fifty">x</td>
        </tr>
        <tr>
            <td class="fifty">a</td>
            <td class="fifty">longer</td>
        </tr>

        <tr>
            <td class="fifty">reallyreallylong</td>
            <td class="fifty">medium</td>
        </tr>
    </table>

这正是我想要的，我很高兴，除了当这个表出现在另一个表中时，一切都会消失。在这种情况下，所有列都缩小到可能的最小尺寸（至少对于我的Chrome版本而言）。

这是一个证明我的困境的jsFiddle：http://jsfiddle.net/KTkZm/

任何人都可以对此有所了解，并希望找到一种方法让内部表格在表格之外进行渲染吗？谢谢！

Answer 1

检查以下jsfiddle链接。工作正常。

http://jsfiddle.net/KTkZm/14/