Can't set CSS width of column in fixed column table

Question

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.

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.

If I change the CSS to `#content .fixedColumn td.dataCol` and then add that class to the table header, it still doesn't work for multi-cols — Tom, Aug 08 '17 at 15:01
That's because the table header should be targeted with `th` in the CSS, not with `td`. So change `td.dataCol` to `th.dataCol`. But generally speaking, if you have a table with a few columns and each column has a header, when you set the width of the header, the column will update accordingly. Tables suck though, and sometimes they don't get set if you don't set all columns/headers and only set one of them somewhere in the middle. — Lansana Camara, Aug 08 '17 at 15:08
I did change the CSS and updated the HTML. Still doesn't work. So frustrating...https://jsfiddle.net/eb5ts6c6/1/ — Tom, Aug 08 '17 at 15:16
In the CSS where you set width of th, change `width` to `min-width`. This works: https://jsfiddle.net/eb5ts6c6/2/ — Lansana Camara, Aug 08 '17 at 15:18
Perfect, that works. Post it as an answer and I'll check it off. — Tom, Aug 08 '17 at 15:30

score 1 · Accepted Answer · answered Aug 08 '17 at 15:31

1

In your fiddle here, you set width of th in your CSS. Change width to min-width and your columns should resize accordingly.

answered Aug 08 '17 at 15:31

Lansana Camara

1 Answers1