html - 表格调整th和td的行宽

我有一张桌子，并且<th>和<td>假定宽度相同，我在sass和CSS中做错了什么？ nth-child(1)和nth-child(2)假设有20％和nth-child(3) 60％，我在做什么错？谢谢。

SASS代码：

 table {
      th,td:nth-child(1),
      th,td:nth-child(2) {
        width: 20%;
      }
      th,td:nth-child(3) {
        width: 60%;
      }

      tr {
        width: 100%;
        table-layout: fixed;
        display: inline-table;
      }
  }

table th, table td:nth-child(1),
table th, table td:nth-child(2) {
  width: 20%;
}
table th, table td:nth-child(3) {
  width: 60%;
}

<table>
  <thead>
    <th>1</th>
    <th>2</th>
    <th>3</th>
  </thead>
  <tbody>
    <tr>
      <td>1</td>
      <td>2</td>
      <td>3</td>
    </tr>
  </tbody>
</table>

最佳答案

这是简单的解决方案：

将表格宽度设置为100％

table {
  width: 100%;
  text-align: center;
}

th {
  width: 20%;
}

th:nth-child(3) {
  width: 60%;
}

就这样

关于html - 表格调整th和td的行宽，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/45816643/