Как установить ширину столбца на основе самой широкой ячейки - PullRequest
0 голосов
/ 09 марта 2020

Я работаю над angular 8 проектом на работе. У меня есть страница, которая отображает таблицу. Согласно текущему коду ширина каждого столбца была установлена, как показано ниже. Ширина устанавливается только для th, а не для 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%;
}

Первый столбец в таблице - Title. Я хочу, чтобы ширина title была установлена ​​так, чтобы она соответствовала самой длинной Title в каждой строке. Есть ли способ сделать это без Javascript ??

1 Ответ

0 голосов
/ 09 марта 2020

Вы также можете сделать это в меньшем количестве кода.

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

КОРОТКАЯ ВЕРСИЯ

.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%;
}
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...