HTML/CSS Table, how do I increase width of table without affecting width of cells?

Question

I have a table whose width is 80% of screensize. This table contains my menu items. Menu items are in the form of table cells. The design I want is that each cell should only be as wide as the text inside it. But I also want a last cell, that will be empty and be as wide as the remaining space in the table. I.E I want the last to inherit the width of the table (remaining space).

But, all the cells get stretched when I increase table width instead of them just fitting to their text.

How do I stop this from happening?

I want all but last of the cells to exactly fit their text.
I want the last cell to take up all the remaining space.

Thanks!

have you tried inserting another element inside the last td? like a input or span. — Toping, Feb 28 '13 at 11:38
@JamesDonnelly That one is not answered. I am using HTML5 so I can't use nowrap. — Prashanth Subramanian, Feb 28 '13 at 11:52
@Passerby no, I don't want to do that. I want it to fit whatever the content of the text cells maybe. — Prashanth Subramanian, Feb 28 '13 at 11:52
@PrashanthSubramanianIyer: Use CSS. `td { white-space:nowrap; }` `td:last-child { white-space:normal; }` — James Donnelly, Feb 28 '13 at 11:56
Ark, no I have not. Could you please elaborate, I am new to this. Thanks! — Prashanth Subramanian, Feb 28 '13 at 12:02

score 3 · Accepted Answer · answered Feb 28 '13 at 11:44

3

Extend the last cell to occupy full width:

td:last-child {
    width: 100%;
}

…and, if you want to make sure the text in the other cells doesn't collapse:

td {
    whitespace: nowrap;
}

Demo here:

http://jsfiddle.net/barney/kz77m/

answered Feb 28 '13 at 11:44

Barney

16,181
5
62
76

It'll work some kind of better, too ;) — `table-cell` display properties (height stretched to fit, vertical alignment, etc) are quite unique, so setting the last cell to display `inline` has plenty of nasty side-effects. – Barney Mar 01 '13 at 09:34

score 0 · Answer 2 · answered Feb 28 '13 at 11:41

0

It's simple via CSS. You just modify the display style to inline.

Attached fiddle: http://jsfiddle.net/CZYSa/

answered Feb 28 '13 at 11:41

Nick Andriopoulos

10,313
6
32
56

I tried the same, but it stretches the first to last but one cells to fill the table width.. – Prashanth Subramanian Feb 28 '13 at 12:01
I'm afraid I do not understand the comment, does the fiddle linked above not work? – Nick Andriopoulos Feb 28 '13 at 12:04
Sorry, my bad. Your solution works great. I have one additional question though. If I have a reallylongword space_reallylongWord , the layout goes for a toss (the height of the tr increases), how do I stop that? Thanks! – Prashanth Subramanian Feb 28 '13 at 12:15
please check with http://www.w3schools.com/cssref/css3_pr_word-break.asp if this is helpful – Nick Andriopoulos Feb 28 '13 at 12:17
Thanks a lot hexblot. I had to do a white-space:nowrap; which I found out after studying work-break. Thanks again :) – Prashanth Subramanian Mar 01 '13 at 04:07

HTML/CSS Table, how do I increase width of table without affecting width of cells?

2 Answers2