4

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:

screenshot

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.

Community
  • 1
  • 1
Wabbitseason
  • 5,641
  • 9
  • 49
  • 60
  • These can be notoriously awkward to get right; even with very precise styling, tables still often seem to have a mind of their own. – Spudley Sep 28 '10 at 12:35
  • 1
    When you use the default [‘auto table layout’ algorithm](http://www.w3.org/TR/CSS21/tables.html#auto-table-layout) you are completely at the mercy of the browser as to how it chooses to allocate ‘spare’ table width. There isn't one standard algorithm for this (the one in the CSS2 spec is ‘non-normative’) and browsers do different things; IE in particular does a number of strange things. Sorry. If you want really *reliable* rendering the only way forward is `table-layout: fixed`. – bobince Sep 28 '10 at 13:18
  • Actually `table-layout: fixed` made everything worse in IE, even in IE8, while it helped a bit in other browsers. So far it seems that it can't be done without a `
    ` tag.     – Wabbitseason Sep 28 '10 at 16:19

6 Answers6

2

You have set as fixed the width of the table element, but not the width of the TDs.

Both tables for sure will have the same width, but the relative width of each TD will change depending on its content.

To get your TDs with the same width, you can set its width with a percentage (20% for each of your five columns):

<table border="1" width="220">
<tbody>
    <tr>
        <td width="20%">lorem</td>
        <td width="20%">ipsum</td>
        <td width="20%">lorem ipsum</td>
        <td width="20%">lorem</td>
        <td width="20%">ipsum</td>
    </tr>
</tbody>
</table>

I've checked it on my browser (Firefox) and it goes.

Tomas Narros
  • 13,390
  • 2
  • 40
  • 56
  • This defines each cell's width as equal. I cannot do this, the cells can have arbitrary content. Thanks for the tip though. – Wabbitseason Sep 28 '10 at 12:37
  • @Wabbitseason: then, I haven't undestood your question: Do you want you cells to be equally sized, or do you want to set fixed widths, or do you want to let the TDs width to be set dinamicaly? – Tomas Narros Sep 28 '10 at 12:48
  • I don't want to do anything with the TDs. All I want is to avoid having to use a
    tag. After the