Width of a <td> is narrower when I use a <br> in it on a fixed width <table>. Why?

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

Try to specify a width for the < td >.

Answer 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.

Answer 3

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

Answer 4

I have tried your table on firefox and as I doubted there is no blank space between the left border and the string Lorem Ipsum. The only blank space is on the right (between the right border and the string) when the word ipsum is wrapped to the next line. Please take a look at the picture I attached to get a clearer idea of what I am saying.

This is due to the fact that the word "Lorem" is separated from the word 'ipsum' by a blank space and when the wrapping occurs the browser preserves the blank space, also called the white space. Relying on html and css only I do not think that there is a wrapping context where the browser dismisses the blank space on wrapping. You will have to do with it or write a function in javascript which will manipulate the string and eliminate the blank space (or replace it by < br />. For the space on the left hand side in you screenshoot, try to revise your code and see that there is no redundant margins or paddings which are forcing this blank space.

Answer 5

If whitespace aesthetics are what you're after, you can add some slight padding (2px or 3px) to the td, e.g.:

td {
  padding: 3px;
}

This should help the cells look more even in terms of whitespace.