如何製作具有動態寬度的表格列

我有一個包含動態列數的表格。如果表格寬度增加超過100％，那麼列寬應該是CSS中定義的最小寬度。否則，列寬應適合內容。如何製作具有動態寬度的表格列

我該怎麼辦？

<style> 
table { 
    table-layout: fixed; 
    width: auto; 
} 
td { 
    min-wdith: 250px; 
} 
</style> 

<table> 
    <tr> 
     <td> 
      Col 1 
     </td> 
     <td> 
      Col 2 
     </td> 
     <td> 
      Col 3 
     </td> 
     <td> 
      Col 4 
     </td> 
    </tr> 
</table>

來源

2015-05-07 Sanky

你有一個錯字：''民wdith''而不是''最小width''。我不確定是否只使用CSS可以實現，但指定最小寬度將導致單元格大於內容（如果它很短），無論表格大小如何。另外，如果你有很多列（比如說8個），那麼你的桌子總是會比高清屏幕大（8×250像素= 2000像素，大於1920像素）。 – Chop

它適用於大量列，但不適用於小列。說如果我只有一個圖層，則此列寬變爲表格的100％。 – Sanky

如果您在所有列上強制使用最小寬度，則如果列數過多，則表格將比屏幕更寬。這是我的觀點。此外，我想了解，當「適合內容」模式不適合屏幕時，爲什麼具有最小寬度很重要？爲表指定一個（max-）寬度並且不爲td指定寬度將已經導致瀏覽器爲每列計算最佳寬度，並且該表不會溢出。 – Chop

簡單的解決方案：給width: 100%;表。

table { 
 
    table-layout: fixed; 
 
    width: 100%; 
 
    border:1px solid; 
 
    margin-top:20px; 
 
    border-collapse: collapse; 
 
} 
 
td { 
 
    min-width: 250px; 
 
    border:1px solid; 
 
}

<table> 
 
    <tr> 
 
     <td> 
 
      Col 1 
 
     </td> 
 
     <td> 
 
      Col 2 
 
     </td> 
 
     <td> 
 
      Col 3 
 
     </td> 
 
     <td> 
 
      Col 4 
 
     </td> 
 
    </tr> 
 
</table> 
 

 
<table> 
 
    <tr> 
 
     <td> 
 
      Col 1 
 
     </td> 
 
     <td> 
 
      Col 2 
 
     </td> 
 
     
 
    </tr> 
 
</table>

來源

2015-05-07 08:53:41 ketan

我希望寬度適合內容。 – Sanky

因爲我知道寬度適合內容和'最小寬度'兩個將不可能使用CSS。 – ketan

我也不知道如何與JS做到這一點。 – Sanky

如何製作具有動態寬度的表格列

回答

相關問題