Question

I want to wrap my text inside the cell, so that the widths of all cells will be equal. The text should not be hidden after wrapping. Here’s my table-

<table border="2" width="20px">
<tr>
<td>testtesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttest</td>
<td>test</td>
</tr>
<tr>
<td>test</td>
<td></td>
</tr>
</table>

With wordwrap:break-word, the text is getting hidden. Also I don’t want a scroll bar.

How can that be achieved by CSS? Point me in right direction.

Answer 1

http://jsfiddle.net/fekSg/. Use fixed for table layout, and make all the td elements wrap

<style>
td {
word-wrap: break-word;
}
</style>
<table border="2" width="100px" style='table-layout:fixed;'>
<tr>
<td>testtesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttest</td>
<td>test</td>
</tr>
<tr>
<td>test</td>
<td></td>
</tr>
</table>