CODEWITHSUNDEEP
htmlcsscss-tables
mklauber
mklauber

Reputation: 1144

Fixed width table with variable columns

I've got a fixed width table ( style="width: 100%" ) with dynamic data being placed into the cells. The data varies greatly in terms of width, and some strings exceed the length of the table without spaces. Therefore, I've used table { table-layout:fixed; word-wrap: break-word; } to wrap the text in the columns, and keep the table from exceeding the page width.

However, this results in equally spaced columns, which is not an optimal use of the space of my table, resulting in some cells that are wrapped two or three times, and others that have one word in all that space.

Is there a way to keep a maximum table width, break words, and utilize the browsers layout optimizations for variable width columns?

Upvotes: 0

Views: 4067

Answers (1)

dadinck
dadinck

Reputation: 1158

If you have a column that you always expect to be larger than the others, you should indicate with e.g. <td width="40%">. Also, if there is a column which will always be small, you can set a width to that as well. The more clues you give the browser, the better the layout will look.

Upvotes: 1

Related Questions