如何讓我的HTML表格100％寬，並且所有的單元格只與其內容一樣寬？

Question

我有這樣的網格：

如果更改的表寬度從100％到汽車，表水平崩潰。

這是不可取的。如何使表格列（td元素）自動縮小以適應其內容，同時，table和tr元素將填充其父項的整個空間？

Answer 1

我怎樣才能使表列（TD元素）會自動縮小以適合他們的內容，而在同一時間， table和tr元素是否填充父項的整個空間？

<table>和<tr>元件是一樣寬他們的內部的<td>元件。你不能讓每個<td>儘可能小，其內容和有表作爲一個整體一樣寬，可用的空間，因爲表只能是一樣寬，它裏面的細胞。

（即不像大多數HTML元素，<table>元素不能被獨立地從它們的內容的尺寸。）

可以設置一個小區爲儘可能寬雖然，通過給它的100%寬度：

<table style="width: 100%; background: grey; color: white;"> 
    <tr> 
     <td style="background: red;">Content</td> 
     <td style="background: green;">Content</td> 
     <td style="background: blue; width: 100%;">Content</td> 
    </tr> 
</table> 

見http://jsfiddle.net/9bp9g/

Answer 2

<td>所述的寬度將由<td>在第一<tr>寬度來限定。

否則，你可以使用CSS來定義規則<td>寬度，如：

.myform tr td{padding:0px;margin:0px;} 
.myform td{width:200px;}