I need a table that has a fixed width but dynamic height to accommodate varying content lengths. Take a look at this example:
Despite setting a fixed width, my content is overlapping. What am I doing incorrectly? Here is my current code:
<table width="60%" align='center' cellpadding='2'
cellspacing='2' border='2' style='table-layout:fixed'>
<thead>
<tr>
<th>#</th>
</tr>
</thead>
<tbody>
...
</tbody>
</table>
This is the css I am using:
table{
font-size:12px;
}
table td{
padding:5px; height:auto;
background:#f6f6f6;
}
table thead tr th{
background:#d7dbe2;
}
Any suggestions on how I can make the height adjust dynamically?