The width of a <td> is already when I use a fixed width of <table> in it. What for?

Question

I have this piece of HTML code (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 displayed as in any browser:

Note that the third <td> is wider in the first table, just because I did not use <br> there. Otherwise, the code for the two tables is identical.

I would like to find a way to display the table, as in the second example, but without the need to use the <br> tag.

Explanation

I cannot specify the width of the cells, because they can contain any number of characters.

Answer 1

This seems to be a problem of the old years / question - unfortunately, I have no solution offering only this link since 2005, which proves that someone struggled with this even then. :)

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

Answer 2

You set the fixed width of the table element, but not the width of the TD.

Both tables will probably have the same width, but the relative width of each TD will vary depending on its contents.

To get your TDs with the same width, you can set its width with a percentage (20% for each of the 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 checked it in my browser (Firefox) and it goes.

Answer 3

Try specifying a width for the <td>.

Answer 4

I tried your spreadsheet on firefox, and since I doubted there was no space between the left border and the Lorem Ipsum line. The only empty space on the right (between the right border and the line) when the word ipsum is wrapped on the next line. Please take a look at the photo I attached to get a clearer picture of what I'm saying.

This is because the word “Lorem” is separated from the word “ipsum” by an empty space, and when the wrapper happens, the browser saves an empty space, also called a space. Relying only on html and css, I don’t think there is a packaging context where the browser rejects empty space when packaging. You will need to do this or write a function in javascript that will manipulate the string and exclude empty space (or replace it with <br / ">. In the field to your left on the screens you are trying to revise your code and make sure there are no extra fields or paddings that force this empty space.

Answer 5

If the aesthetics of spaces is what you need, you can add a small pad (2px or 3px) to td , for example:

 td { padding: 3px; } 

This should help cells look more even in terms of spaces.

Answer 6

 <table border="1" width="220"> <tbody> <tr> <td width="20%">lorem</td> <td width="20%">ipsum</td> <td width="20%; overflow:hidden; wordspace:break; word-spacing:10px;">lorem ipsum</td> <td width="20%">lorem</td> <td width="20%">ipsum</td> </tr> </tbody>