HTML表格列寬：結合固定和可變寬度

我做了一個表作爲這樣的：HTML表格列寬：結合固定和可變寬度

<table style="width:1000px;"> 
    <tr> 
    <td>aaa</td> 
    <td id="space"></td> 
    <td class="fixed-width">bbb</td> 
    <td class="fixed-width">ccc</td> 
    </tr> 
</table>

我會怎麼做的CSS，使B和C柱具有固定寬度的列只需要儘可能多的空間，並且空間列可以擴展以填充表格的其餘部分？

來源

2011-11-19 whotemp

我不是CSS大師，但它似乎不是沒有辦法做到這一點。這似乎在Firefox和IE7中起作用。我沒有檢查其他瀏覽器。

第一個縮小擬合<col>設置（使用CSS）爲0的寬度，因此縮小以適合內容。

第二個空間<col>設置（使用CSS）的寬度大於將適合在表中。

最後兩個固定寬度的寬度<col> s不在<col>上。相反，它的設置是<td>風格。這強制了列的寬度。

<!DOCTYPE html> 
<html> 
    <head> 
     <title>cols</title> 
     <style type="text/css"> 
      td.fixed-width { 
       width: 100px; 
       background-color:aqua 
      } 
      td.min-width {background-color:aqua} 
      td.space {border: thick blue solid} 
     </style> 
    </head> 
    <body style="width:1100px; font-family:sans-serif"> 
     <table style="width:1000px;"> 
      <col style="width:0"/> 
      <col style="width:1000px"/> 
      <col span="2" /> 
      <tr> 
       <td class="min-width">aaa</td> 
       <td class="space"></td> 
       <td class="fixed-width">bbb</td> 
       <td class="fixed-width">ccc</td> 
      </tr> 
      <tr> 
       <td class="min-width">aaa asdfasdf asdfsad</td> 
       <td class="space"></td> 
       <td class="fixed-width">bbb fasdas</td> 
       <td class="fixed-width">ccc vdafgf asdf adfa a af</td> 
      </tr> 
     </table> 
    </body> 
</html>

來源

2011-11-21 01:29:46

這工作！萬分感謝。 – whotemp

@whotemp - 不客氣。我細讀了CSS 2.1規範，看看我是否能找到任何需要這種行爲的東西，然後空着。我想說的是，如果表格中的水平空間不足，那麼在給予列中的單元格時，他們要求的要比提供寬度要高。 –

HTML表格列寬：結合固定和可變寬度

回答

相關問題