嵌套表否定「表格佈局：固定的」

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

嵌套表否定「表格佈局：固定的」

回答

相關問題