Html 使用css设置列的宽度

我正在尝试设置表中列/单元格的宽度。我通过伪选择器设置了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中使用

列宽

而不是

宽度

---

有关更多详细信息，请参见。

您应该注意所有宽度加起来都是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%;
}

---

这对我不起作用。它的工作原理是设置一个colgroup并为每个列指定一个宽度。但是谢谢你

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