How to set column width based on the widest cell

Question

I am working on an angular 8 project at work. I have a page that displays a table. As per the current code the width of each column was set like below. Widths are only set for th and not for td

.data-table tr th:nth-child(1) { width: 20%; } .data-table tr th:nth-child(2) { width: 10%; } .data-table tr th:nth-child(3) { width: 16%; } .data-table tr th:nth-child(4) { width: 18%; } .data-table tr th:nth-child(5) { width: 18%; } .data-table tr th:nth-child(6) { width: 15%; } .data-table tr th:nth-child(7) { width: 5%; }

First column in table is Title. I want width of title to be set such that it fits the longest Title in every row. Is there a way to do this without Javascript??

You can use min-width here and for left columns define width: auto — Nisharg Shah
– Nisharg Shah, Commented Mar 9, 2020 at 7:07
@NishargShah setting min-width and width: auto isn't working. Also from what I knew min-width didn't work on tables. — Amruta
– Amruta, Commented Mar 9, 2020 at 9:33
What?? Who said width property does not work on the table? — Nisharg Shah
– Nisharg Shah, Commented Mar 9, 2020 at 9:38
Width works, I'm setting width in my code. However I tried setting min-width but it doesn't work — Amruta
– Amruta, Commented Mar 9, 2020 at 10:07

Nisharg Shah · Accepted Answer · 2020-03-09 07:12:46Z

You can also do that in less code.

.data-table tr th:nth-child(1) { min-width: 20%; } .data-table tr th:nth-child(2), .data-table tr th:nth-child(3), .data-table tr th:nth-child(4), .data-table tr th:nth-child(5), .data-table tr th:nth-child(6) { max-width: 15%; } .data-table tr th:nth-child(7) { width: 5%; }

SHORT VERSION

.data-table tr th:first-child { min-width: 20%; } .data-table tr th:not(:first-child):not(:last-child) { max-width: 15%; } .data-table tr th:last-child { width: 5%; }

Collectives™ on Stack Overflow

How to set column width based on the widest cell

1 Answer 1

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Linked

Related