Table columns: width, min-width, word wrapping and column "importance"

Question

I've got three columns in the table of width: 100%.

2nd and 3rd column should be width: 100px no matter what
3rd column should be as much as it needs (no wrapped lines), but nothing more.
1st column should consume all the remaining space.

JSFiddle: http://jsfiddle.net/o66czLtj/4/

Please note both the 1st and the 4th column don't have the width specified, so their widths are counted automatically by the browser. However, I want the 1st column to be the most important, and take all the remaining space, but only after the 4th column was able to render itself without wrapping any lines.

Actual:

enter image description here

Expected:

enter image description here

How to achieve this without hard-coding the width of the 1st or the 4th column? Perfectly with CSS only.

Rationale: number of buttons in the 4th column is unknown. It may be 1, it may be 4.

you know roughly the width of the "delete" column, why dont you add width to that as wel as .col2 and .col3? — Samuel Cook, Sep 06 '14 at 22:18
And what if `.col4` has so many buttons that it's going to take approx. 40% of the table? http://jsfiddle.net/9oxnu8km/ — Nowaker, Sep 06 '14 at 22:19

score 1 · Accepted Answer · edited May 23 '17 at 11:49

1

See this answer. If you give the 4th column width: 1px; white-space: nowrap; then it should occupy the minimum space it can without affecting its content.

.col4 {
  width: 1px;
  white-space: nowrap;
}

edited May 23 '17 at 11:49

Community

1
1

answered Sep 06 '14 at 22:15

gandaliter

9,863
1
16
23

score 0 · Answer 2 · answered Sep 06 '14 at 22:18

0

Could you not just add

Float: right

To column 2 and 3?

See fiddle below :)

http://jsfiddle.net/r7b3hny7/

I think this is what you're after?

answered Sep 06 '14 at 22:18

Benjamin

347
1
12

Yes, it is! I didn't know `float` works this way on tables. Clever! I'll accept this answer if no cleaner solution comes. Thanks. – Nowaker Sep 06 '14 at 22:21
Awesome! :) To be honest, neither did I until I tried it! Haha! – Benjamin Sep 06 '14 at 22:22
Really? :O I'm on Firefox! – Benjamin Sep 06 '14 at 22:28
Yep, my Firefox doesn't like it. Chrome does. – Nowaker Sep 06 '14 at 22:29

Table columns: width, min-width, word wrapping and column "importance"

2 Answers2