`table-layout: fixed`: how does it work?
I have a table that's built by our platform that uses
table-layout: fixed. I'm trying to shrink some of the columns so what I'm doing is using width: 40px on some of the column cells. The issue is that while the cells shrink, they don't actually become 40px. Even setting a max-width: 40px does nothing. (and no, it's not getting overridden).
The confusing part is using relative units like % or vw does change the cells widths down to that actual size I set it as far as I can tell. Why is that?3 Replies
I forgot that
table-layout even existed, lol.
Do you have an example that you can recreate it with?Hmmm let me try to recreate something tomorrow in CodePen 😅 should have came prepared but it's from a private application. I'll ping you if I don't forget lol
As Kevin says, an example would be good.
In theory this should work as long as it meets a few conditions.
- The table must have a specific width
- Not all the cells can have a fixed width or the total widths must add up to the same width as the table itself.
- box-sizing: border-box; must be set (at least this was the case in my tests, not 100% on this one)