Comments on: Faking Min Width on a Table Column https://css-tricks.com/faking-min-width-on-a-table-column/ Tips, Tricks, and Techniques on using Cascading Style Sheets. Sat, 14 Jan 2023 07:42:02 +0000 hourly 1 https://wordpress.org/?v=6.4.3 By: Anders Pedersen https://css-tricks.com/faking-min-width-on-a-table-column/#comment-1802661 Sat, 14 Jan 2023 07:42:02 +0000 https://css-tricks.com/?p=376307#comment-1802661 In reply to wfwefwefewf.

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 https://css-tricks.com/faking-min-width-on-a-table-column/#comment-1802660 Sat, 14 Jan 2023 07:39:39 +0000 https://css-tricks.com/?p=376307#comment-1802660 In reply to Chris Koelle.

Interesting. How did you decide on 680px?

]]>
By: wfwefwefewf https://css-tricks.com/faking-min-width-on-a-table-column/#comment-1802650 Fri, 13 Jan 2023 11:06:09 +0000 https://css-tricks.com/?p=376307#comment-1802650 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 https://css-tricks.com/faking-min-width-on-a-table-column/#comment-1802625 Tue, 10 Jan 2023 19:55:17 +0000 https://css-tricks.com/?p=376307#comment-1802625 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 https://css-tricks.com/faking-min-width-on-a-table-column/#comment-1802624 Tue, 10 Jan 2023 18:40:05 +0000 https://css-tricks.com/?p=376307#comment-1802624 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.

]]>