HTML table rows with varying cell heights - html

Question

I have an HTML table that's being filled with content of various sizes. Some can be about a paragraph long.
All I want to accomplish is to have the cells automatically adjust in height to support the various content, without giving each row a fixed size ('cause that would look bad).
<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>
Right now, I have fixed heights for each cell. Generally, most cells fit this height, but I'd like the ones that don't to be smaller.
Any tips or suggestions would be awesome.
Thanks!

Answer 1

Lets clean up your markup for starters:
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>
You don't need those DIV elements inside the TD cells.
The settings for height were incorrect and not necessary. The
proper way to set height is height:130px if you really have to.
Your widths were incorrect. If you want to use percentages you need
all TD width percentages to add up to 100%
Don't use inline CSS. Use an external CSS stylesheet or encapsulate
all your styles in a STYLE element in the HEAD.
If you need to set vertical alignment for the cells use:
td { vertical-align:top; }

Answer 2

Just remove all height attributes. Also please note that both height and width attributes are obsolete - use styles instead.