I have a wide table – possibly very wide – and I want the table to be as wide as necessary to fit everything, i.e. as-if it the width was auto (and the screen was wider).

But, by default, tables seem to never exceed the size of their containers!

I've found an answer using JavaScript, but is there a pure CSS answer too? Or a better JavaScript solution?

Here's a JSFiddle fiddle with an example table. Note that in this example the content is bigger than the 'screen', but the desired effect should cause the width of the cells to be large enough so that the text of each cell is all on a single line.

Per GChabot's answer, I don't want the cells to be bigger than their contents. Per their subsequent ment, by "fit everything", I'm of course referring to the Goldilocks fit, i.e. just enough so that contents don't wrap, but no larger.

I have a wide table – possibly very wide – and I want the table to be as wide as necessary to fit everything, i.e. as-if it the width was auto (and the screen was wider).

But, by default, tables seem to never exceed the size of their containers!

I've found an answer using JavaScript, but is there a pure CSS answer too? Or a better JavaScript solution?

Here's a JSFiddle fiddle with an example table. Note that in this example the content is bigger than the 'screen', but the desired effect should cause the width of the cells to be large enough so that the text of each cell is all on a single line.

Per GChabot's answer, I don't want the cells to be bigger than their contents. Per their subsequent ment, by "fit everything", I'm of course referring to the Goldilocks fit, i.e. just enough so that contents don't wrap, but no larger.

• javascript
• css
• html-table

• can you provide jsfiddle? Can you avoid setting the width of a container? – LorDex Commented Feb 7, 2014 at 23:47
• @LorDex – yeah, I'll make a JSFiddle. I don't think I can avoid setting the width of the container; the container is just the page body. – Kenny Evitt Commented Feb 7, 2014 at 23:58
• you must have some width set up for body, because by default there shouldn't be a problem: jsfiddle/jzwm5 – LorDex Commented Feb 7, 2014 at 23:59
• @LorDex – Add another word to each of those cells; I expect that the contents will wrap onto another line and that's not what I want. – Kenny Evitt Commented Feb 8, 2014 at 0:11

4 Answers 4

Set the cells up so they do not wrap

td { white-space: nowrap; }

Depending on what you mean by "fit everything", you might want to define a min-width for your tds:

min-width:250px;

That way, each cell has a reasonable size to display some text, on one or more lines (or just one if you set them as nowrap as epascarello suggested). If you are displaying fixed-size element (such as images), the table should expand by default.

CSS overflow should fix your issue take a look at this post http://css-tricks./the-css-overflow-property/

Here's the quick-and-dirty JavaScript I'm using now:

$('#table-container').attr('style', 'width: 1000%');
$('#table-container').attr('style', 'width: ' + $('#tblMain').width() + 'px;');

#table-container refers to a div surrounding the table; the table has an id of tblMain.

I know this won't work if the table is 10 times wider than the current screen size, but a general solution should be pretty easy to implement.