Sunday 13 December 2009

How do you get a HTML table TD cell to wrap consistently?

I have just had some fun working with a HTML table. I just a table with five cells each of which I had initially set widths on each TD element. When the data for each cell was less than the predefined widths everything displays fine but as soon as the data exceeds the width I found the cell sometimes wrapped but usually kept the table expanding (The data I was trying to get to wrap was a URL - so just a continuous string without spaces) I think had the data included spaces the mishaped table would not have been so bad.

The solution I found was to embed a DIV within each TD that I wanted tied to a specific width - and within the DIV style or CLASS set a width explicitly. This found kept the table aligned!


<table>
<tbody>
<tr>
<td width="100px">
</td>
<td width="200px">
<div>class="widthclass" OR style="width:200px">
data....
</div>
</td>
</tr>
</tbody>
</table>

No comments:

Post a Comment