Question

我正在做一个有角度的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。没有Java，有没有办法做到这一点？

Answer 1

您也可以用更少的代码来做到这一点。

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

如何根据最宽单元格设置列宽

1 个答案: