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

2列，可变宽度的
列具有相同的宽度
列没有超过必要的宽度

我发现“table-layout：fixed”可以实现这一点，如果我将两列设置为“宽度：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/

任何人都可以揭示出这个光，并希望找到一种方式来获得内部表来呈现因为它外部的表？谢谢！

来源

2013-07-27 mikero

有趣。没有能够使它工作，但我确实发现'table-layout：fixed'没有任何效果。我的意思是，删除它什么都不做。 –

查看下方jsfiddle的链接。它工作正常。

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

来源

2013-07-27 05:28:40 Ani

许多人无法访问jsfiddle。如果你可以包含代码摘要（你不需要粘贴所有重要的东西），它可以让更多的人在将来使用你的答案。 – Enigmadan

只能使用您的确切字体设置。在我的浏览器上，这完全不同。 –

该解决方案是为外表添加一个“width：NNNpx”样式。虽然它似乎恢复了内部表的“表格布局：固定”行为，但它会剪切内容，并且它也假设我知道内部表格的最终宽度（在这种情况下我不这样做）。但是，对于设置外部桌子的宽度似乎确实有意义。 “宽度：自动”确实*合理的东西，但仍然使得内部的桌子比它需要更宽。 – mikero

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

回答

相关问题