Fixed width table with variable columns

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; } 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?

width: 100% is not fixed width, that is variable width. Also, can you show the HTML source and styles for the tables TD's? — Mike Brant
– Mike Brant, Commented Aug 14, 2012 at 21:16
If you know which columns are going to need a lower width, you could define for that column header the width. So for example, if column 2 is a thin column, you could say <th style="width: 5%"> — karancan
– karancan, Commented Aug 14, 2012 at 21:51
@MikeBrant it is variable width, you are of course correct. But currently, if the (non-space-broken) data in one of the cells exceeds the width of the containing div, the table extends past the edge of the div and off the page. — mklauber
– mklauber, Commented Aug 15, 2012 at 14:09
@karancan That was my idea, but it doesn't help if I have two (possibly) wide columns I want to balance. — mklauber
– mklauber, Commented Aug 15, 2012 at 14:10

dadinck · Accepted Answer · 2012-08-14 21:50:16Z

1

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.

answered Aug 14, 2012 at 21:50

dadinck

1,1681 gold badge7 silver badges8 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

mklauber Over a year ago

That's what I've started doing, but I've got two columns to balance and using table-layout: fixed they're always the same width. I was just wondering if there was a way to do it without losing the browser layout optimizations.

Collectives™ on Stack Overflow

Fixed width table with variable columns

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related