具有可变列的固定宽度表

Question

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; } table { table-layout:fixed; word-wrap: break-word; } 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?

Answer 1

If you have a column that you always expect to be larger than the others, you should indicate with eg <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.