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, Mar 09 '20 at 07:07
Does this answer your question? [Fit cell width to content](https://stackoverflow.com/questions/11267154/fit-cell-width-to-content) — Anurag Srivastava, Mar 09 '20 at 07:43
@NishargShah setting `min-width` and `width: auto` isn't working. Also from what I knew `min-width` didn't work on tables. — Amruta, Mar 09 '20 at 09:33
What?? Who said `width` property does not work on the table? — Nisharg Shah, Mar 09 '20 at 09:38
Width works, I'm setting width in my code. However I tried setting min-width but it doesn't work — Amruta, Mar 09 '20 at 10:07
please see `inspect element`, some CSS property overcome your `min-width` — Nisharg Shah, Mar 10 '20 at 13:54

score 0 · Answer 1 · answered Mar 09 '20 at 07:12

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%;
}

How to set column width based on the widest cell

1 Answers1