CSS表列寬度：固定 - 動態的（30％） - 動態（70％） - 固定

Question

我設法獲得這種表佈局的：

固定 - 動態的（50％） - 動態（50％） - 固定

http://jsfiddle.net/ihtus/ksucU/

但我怎麼得到這個樣了？固定 - 動態的（30％） - 動態（70％） - 固定

感謝。

Answer 1

像這樣：

<table> 
    <tr> 
     <td style="width:200px;"> 
     200px width - content 
     </td> 
     <td width="30%"> 
     dynamic width - content 
     </td> 
     <td width="70%"> 
     dynamic width - content 
     </td> 
     <td style="width:100px;"> 
     100px width - content 
     </td> 
    </tr> 
    </table> 

table { 
    width:100%; 
    border-collapse:collapse; 
    table-layout:fixed; 
} 

td { 
    border: 1px solid #333; 
} 

http://jsfiddle.net/7dSpr/

Answer 2

的一般方法是作爲一個Monkieboy使用的相同，但是你應該避免內聯樣式。 （我的意思是寫style="someting"）在你的HTML文件。您應該使用類和CSS來代替。

首先給TD一類這樣<td class="thin-column">text here</td>， 然後在你的CSS使用該應用的風格：.thin-column:{ width: 30% }