Question

我正在尝试设置表格中列/单元格的宽度。我已经通过伪选择器设置了td元素，因为我有很多行，我不想重复。但这不起作用。每个单元格的宽度始终相同。这就是我尝试过的，对我来说更有意义。我需要三个中的最后一个。

<table class="table-accordion">
  <tr>
    <td>Jill</td>
    <td>Sofia</td> 
    <td>50</td>
    <td>50</td>
    <td>50</td>
  </tr>
  <tr>
    <td>Eve</td>
    <td>Jackson</td> 
    <td>94</td>
    <td>50</td>
    <td>50</td>
   </tr>
 </table>

这是css

th {
  background-color: $primary-color;
  color: $white;
  padding: 0;
  line-height: 2;
}

table {
  border-collapse: collapse;
  margin-top: 3%;
  table-layout: fixed;
}

tr {
  border-bottom: 1px solid black;
}

td {
  text-align: left;
}

td {
  width: 5%;
}

td:nth-child(2) {
  width: 47.5%;
}

td:nth-child(3) {
  width: 15.8%;
}

td:nth-child(4) {
  width: 15.8%;
}

td:last-child {
  width: 15.8%;
}

Answer 1

在css中使用column-width代替width。

有关详细信息，请参阅https://developer.mozilla.org/en-US/docs/Web/CSS/column-width。

Answer 2

你需要注意所有宽度加起来都是100％而你必须指定表格的宽度，以百分比或像素为单位：

th {
  background-color: $primary-color;
  color: $white;
  padding: 0;
  line-height: 2;
}

table {
  border-collapse: collapse;
  margin-top: 3%;
  table-layout: fixed;
  width:100%;
}

tr {
  border-bottom: 1px solid black;
}

td {
  text-align: left;
}

td:nth-child(1) {
  width: 20%;
}

td:nth-child(2) {
  width: 50%;
}

td:nth-child(3) {
  width: 10%;
}

td:nth-child(4) {
  width: 10%;
}

td:last-child {
  width: 10%;
}

使用css

2 个答案: