具有不同單元高度的HTML表格行

Question

我有一個HTML表格，裏面填充了各種大小的內容。有些可能會長一段。

我想要完成的所有操作都是讓單元格自動調整高度以支持各種內容，而不必爲每行指定一個固定的大小（因爲看起來很糟糕）。

<td align="left" width="10%" height="130"><div>{{this.val8}}</div></td> 
<td align="left" height="130"><div>{{{this.val7}}}</div></td> 
<td align="left" height="130"><div>{{this.val6}}</div></td> 
<td align="left" height="130"><div>{{this.val}}</div></td> 
<td height="130" width="80%"><div>{{{this.val0}}}</div></td> 
<td height="130"><div>{{{this.val8}}}</div></td> 
<td align="right" width="80%" height="130"><div>{{{this.val1}}}</div></td> 
<td align="right" width="80%" height="130"><div>{{{this.val2}}}</div></td> 
<td height="130" width="75%"><div>{{{this.val3}}}</div></td> 
<td height="130"><div>{{this.val4}}</div></td> 
<td height="130"><div>{{this.val5}}</div></td> 

現在，我已經爲每個單元固定了高度。一般來說，大多數細胞適合這個高度，但我希望那些不會更小的細胞。

任何提示或建議將是非常棒的。

謝謝！

Answer 1

讓清理您的標記爲首發：

http://jsfiddle.net/x3a6bu7L/

<table> 
    <tr> 
     <td align="left"> 
      {{this.val8}} 
     </td> 
     <td align="left"> 
      {{this.val7}} 
     </td> 
     <td align="left"> 
      {{this.val6}} 
     </td> 
     <td align="left"> 
      {{this.val}} 
     </td> 
     <td> 
      {{this.val0}} 
     </td> 
     <td> 
      {{this.val8}} 
     </td> 
     <td align="right"> 
      {{this.val1}} 
     </td> 
     <td align="right"> 
      {{this.val2}} 
     </td> 
     <td> 
      {{this.val3}} 
     </td> 
     <td> 
      {{this.val4}} 
     </td> 
     <td> 
      {{this.val5}} 
     </td> 
    </tr> 
</table> 

• 你不需要的TD細胞內部的DIV元素。
• 高度設置不正確且不必要。 適當的方式來設置高度是高度：130px，如果你真的必須。
• 你的寬度不正確。如果你想使用你需要的百分比 所有的TD寬度百分比合計爲100％
• 不要使用內聯CSS。使用外部CSS樣式表或將所有樣式封裝在HEAD中的STYLE元素中。

如果您需要設置垂直對齊的電池使用：

td    { vertical-align:top; } 

Answer 2

只需刪除所有高度屬性。另請注意，高度和寬度屬性都已過時 - 請使用樣式。