html columns whose width automatically changes according to their content

Question

I create dynamic HTML pages with 3 columns. Each column can contain a variable amount of text - from 0 to 1000 words. I want the text in the 3 columns look approximately the same height. So, I want to have the column widths change automatically according to the amount of text they contain.

In HTML, this happens automatically in a table, when each cell has a single div of text, see the first table here: http://tora.us.fm/_script/demotables.html

However, when the cells contain several divs, this doesn't work anymore, see the second table there. The leftmost column is very narrow and tall, instead of being wider and shorter.

Adding a "width" attribute to the leftmost column (by clicking the button) shows the expected result. However, I do not know in advance what column should be what width.

Is it possible to have it adjusted automatically?

A jsfiddle: http://jsfiddle.net/erelsgl/RJa2k/5/

i could not really match your description to the demo. is my browser doing sth strange? I have uploaded a screenshot of your demo rendered by google chrome http://imageshack.us/f/841/torausfmscriptdemotable.png/ please confirm that this is what you want to see... — Matthias, Jul 18 '12 at 08:10
@Matthias yes, this is what I want to see, and this is what I see after I click the "Add/Remove width" button. However, before I click the button, the left column is narrow and tall, and includes a single "aaaaaaaa" word in each line. Maybe this depends on the window width - it seems that you have a wide screen - if you make your window about 800px wide, you will see what I mean. — Erel Segal-Halevi, Jul 18 '12 at 08:18
A potentially useful link http://www.w3.org/TR/CSS21/tables.html#auto-table-layout explains the algorithm by which column widths are calculated. — Erel Segal-Halevi, Jul 25 '12 at 07:04

score 1 · Answer 1 · answered Jul 31 '12 at 06:01

1

Try to add to the css this td div{white-space: nowrap} or this td div{display: inline}. Is that the result you need?

answered Jul 31 '12 at 06:01

Roman

904
1
9
19

1

Thanks for telling me about the "white-space" property, which I didn't know about before. However, this is not a general solution to the problem: sometimes the divs in some of the columns are very long, and I do want them to wrap when needed. display:inline is not a solution either, because it puts all the divs in one line - it spoils the display altogether... – Erel Segal-Halevi Aug 01 '12 at 04:33

score 1 · Accepted Answer · edited Dec 27 '18 at 17:45

With the help of my friend, Eden Erez, I found a hack that partly solves the problem:

In each TD, print the content a second time - inside a special div, like this:
```
< td >
 < div class='autowidth' >
     $content
 < /div >
 $content
< /td >
```

In the stylesheet, insert this:

.autowidth {visibility:hidden;}
.autowidth * {display:inline;}

In some of the cases, this will make the browser set the column widths as though they are single-paragraph, but still display them as multi-paragraph. See an example here: http://jsfiddle.net/erelsgl/RJa2k/76/

This works surprisingly good in most cases.

html columns whose width automatically changes according to their content

2 Answers2

Linked