Comments on: Faking Min Width on a Table Column

By: Anders Pedersen

Anders Pedersen — Sat, 14 Jan 2023 07:42:02 +0000

That is also a way og doing it. I know that there have been issues with css display content messing up the semantics. The issue is still open here: https://github.com/w3c/csswg-drafts/issues/3040
Don’t know if it is still an issue – have not tested it lately

By: Anders Pedersen

Anders Pedersen — Sat, 14 Jan 2023 07:39:39 +0000

In reply to Chris Koelle. Interesting. How did you decide on 680px?

By: wfwefwefewf

wfwefwefewf — Fri, 13 Jan 2023 11:06:09 +0000

Why not just use display grid with table and set trs, thead, tfoot, tbody to display contents. Then you can use power of grid to format the table to your liking.

By: Steve Lombardi

Steve Lombardi — Tue, 10 Jan 2023 19:55:17 +0000

I do this all the time with Angular and PrimeNG tables, except I find it safer to use %s instead of pxs. I usually leave one column at “auto”.

By: Chris Koelle

Chris Koelle — Tue, 10 Jan 2023 18:40:05 +0000

The empty col feels like it breaks the semantics of the table a bit. Another possible solution would be to use max and calc with vw units to determine the size of the first column – something like:

.col-200 {
  width: max(200px, calc(100vw - 680px));
}

if the table has a max-width, you would have to use clamp to set the width of the column once the table reaches its max width

.col-200 {
  width: max(200px, min(520px, calc(100vw - 680px)));
  width: clamp(200px, calc(100vw - 680px), 520px)  
}

demo: https://codepen.io/chriskoelle/pen/NWBpOKJ This solution admittedly could become much more complicated depending on the layout of the page surrounding the table.