嵌套表格否定“表格布局：固定”

Question

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

• 2 列，宽度可变
• 列的宽度相同
• 列不超过必要的宽度

我发现如果我将两列都设置为“宽度：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/