HTML CSS Table Cell Width

Question

I'm trying to understand if it is possible to set the width of a table cell or column to either:

a fixed % width
a fixed px width

And, regardless of its content - it stay that width.

However, the scenario is that the first column needs to be longer than the rest. So if I have 10 columns, the first is larger and the other 9 are equally spaced.

I have tried the following but it does not work:

table{display:block;overflow:hidden;}
th td {max-width:2%;overflow:hidden;white-space:nowrap;}
th.question {width:60%;overflow:hidden;white-space:nowrap;}
td.question {width:60%;overflow:hidden;white-space:nowrap;}

Is it possible to achieve a fixed width

G-Cyrillus · Accepted Answer · 2014-06-24 18:39:24Z

1

Is it possible to achieve a fixed width

Yes , if you set the propertie to fixed for the table-layout rule on <table> or on any displayed as table element.

See W3C : http://www.w3.org/wiki/CSS/Properties/table-layout

answered Jun 24, 2014 at 18:39

G-Cyrillus

107k14 gold badges116 silver badges135 bronze badges

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

5 Comments

Homer_J Over a year ago

Thanks for the reply - however, this creates all columns to be equally spaced - which is not the solution I am looking for, as described above.

G-Cyrillus Over a year ago

give a try and understand how this works, else why should i answer :)

Homer_J Over a year ago

I've added table-layout: fixed; to the code above and no joy.

G-Cyrillus Over a year ago

Can you give a link to a fiddle or codepen so, we see how you applied width and table-layout :)

Homer_J Over a year ago

I've been playing and you can set the width of columns in a 'fixed' width scenario and all working as it should!

Collectives™ on Stack Overflow

HTML CSS Table Cell Width

1 Answer 1

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related