Reputation: 4577
I have two tables next to each other, one has overflow set to auto to scroll across if there are more than X columns.
I want to have the columns in this scrollable table a fixed width which I've set with CSS. When there is just a few columns, the fixed width works.
When there is more three columns and it hits the overflow, the CSS width does not work, the column is just sized based on the text.
JSFiddle single column: https://jsfiddle.net/u4onfzzs/
JSFiddle multi-column: https://jsfiddle.net/eb5ts6c6/
Here's the CSS that is being ignored on the multi-col
#content .fixedColumn td.dataCol
{
width:150px;
padding:6px 0px 7px 8px;
}
I'm stumped.
Upvotes: 0
Views: 1833
Reputation: 9873
In your fiddle here, you set width
of th
in your CSS. Change width
to min-width
and your columns should resize accordingly.
Upvotes: 1