Question

I have this HTML code fragment (in a valid document using strict doctype):

<p>Without &lt;br /&gt;</p>
<table border="1" width="220">
<tbody>
    <tr>
        <td>lorem</td>
        <td>ipsum</td>
        <td>lorem ipsum</td>
        <td>lorem</td>
        <td>ipsum</td>
    </tr>
</tbody>
</table>

<p>With &lt;br /&gt;</p>
<table border="1" width="220">
<tbody>
    <tr>
        <td>lorem</td>
        <td>ipsum</td>
        <td>lorem<br>ipsum</td>
        <td>lorem</td>
        <td>ipsum</td>
    </tr>
</tbody>
</table>

This is rendered like this in any browser:

Please note that the third <td> is wider in the first table, only because I haven’t used a <br> tag there. Otherwise the code for the two tables are identical.

I would like to find a way to have the table rendered like it is on the second example, but without having to use a <br> tag.

Clarification

I can’t specify the widths of the cells because they may contain any number of characters.

Answer 1

Seems like this is an ages old problem / question – unfortunately I have no solution to offer just this link from 2005 which proves that someone was struggling with this already even back then. 🙂

http://www.velocityreviews.com/forums/t162343-how-to-prevent-unnecessary-table-resizing.html