Table column width Not Adjusted to content size

[dineesfdc]

I have added the Horizontal and Vertical Scrollbars in my table and I freezed the thread elements when I Scroll Vertically and i Freezed the tbody elements Upto Four Columns, but the table column width is not Adjusting to content size if a particular td content value is long.Need your Help to fix this.

[SamA74]

You have a max-width set on your tds and ths so they cannot expand to take longer content.

[dineesfdc]

I tried to set that to auto but the th and td is getting Collapsed

[SamA74]

Well you can’t have it both ways, a fixed width and a dynamic flexible width at the same time. Note that setting identical min-width and max-width values has the same effect as just adding a fixed width value.
Another option would be to keep the fixed width and enable hyphens in the td.

td {
    width: 120px;
    hyphens: auto;
}

[dineesfdc]

Ok SamA74…Thank You for Helping me.

[PaulOB]

The problem with the approach you are using is that you divorce the table header from the the table body because you set them to block and therefore they are no longer tables anymore and will not align together.

That is the reason that this method only works with if you fix the table widths to match the table header widths. You cannot have auto resizing cells so you would be better off with the table-layout:fixed algorithm anyway because the ‘auto’ algorithm does not have to honour dimensions.

I would use position:sticky these days for a fixed header and avoid all the issues mentioned above. Modern browsers get the enhanced version and older browsers default to a standard table.

I’m not keen on using JS either to fix the first columns either as that makes the actions jerky as you scroll and lags on slow systems. I would again use position sticky and no JS as follows.

A fully fluid table in both width and height that needs no JS and enhanced for modern browsers only but no ill effect on old browsers.