Adjusting a table full width

Question

I would like to format my table like this:

full width
columns wider than others can take more place (often the first col)
columns too large must be cropped (something like overflow: hidden)
last 2 columns must be narrow than others

Here is a jsFiddle to be more explicit: http://jsfiddle.net/BbNFA/

The problem I encounter here is when all texts in the same line are wider than the width of the page, then a scrollbar is showing. I would like to prevent this by hidden the overflow text.

Thanks for your help.

Can you elaborate more on your 2nd and 3rd point? Have you tried using ? A width set in % would be more easier solution. — Selvakumar Arumugam, Jan 06 '12 at 19:32

Selvakumar Arumugam · Accepted Answer · 2012-01-06T19:52:12.253

0

Edit: See my DEMO here with colgroup.

Use table-layout property and set it to fixed like below,

table  { 
    width: 100%;
    table-layout: fixed; <-- added
}

td  {
    white-space: nowrap;
    overflow: hidden;    <-- added
}

edited Jan 06 '12 at 19:52

answered Jan 06 '12 at 19:10

Selvakumar Arumugam

79,297
15
120
134

I try it but the result is that every columns have the same width and the first col is overlapping others (see here http://jsfiddle.net/BbNFA/1/). – Bronzato Jan 06 '12 at 19:13
why not set the column width with desired values. You can set it for first row/thead and rest of the tr will follow the same width. – Selvakumar Arumugam Jan 06 '12 at 19:18
I was searching for another solution than forcing the values... Maybe something is possible, isn't ? – Bronzato Jan 06 '12 at 19:23
So is that mean you don't want to specify width? Did you try using ? – Selvakumar Arumugam Jan 06 '12 at 19:30
@Bronzato Did this answer your question? If yes, please mark it as answered for closure. – Selvakumar Arumugam Sep 26 '12 at 18:31

Adjusting a table full width

1 Answers1