html - 如何在CSS中将表格中的不同列设置为不同的宽度？

Question

有一个包含 3 列的表。现在我想设置第一列 100px 宽度，第二列 200px，最后一列 300px。
为所有 td 设置一个 id 来指示它是哪些列是很尴尬的。
有没有更明智的做法？

Answer 1

假设您的表格具有标准标记，您可以使用 nth-child 或 nth-of-type 来定位每行中的特定单元格。如果您的表有更多列，您可以将任何数字替换为 nth-child。

/* nth-child(1) = the first td in each tr */
td:nth-child(1) {
  width: 100px;
  background: #ddd;
  }

/* the second */
td:nth-child(2) {
  width: 200px;
  background: #ccc;
}

/* the third */
td:nth-child(3) {
  width: 300px;
  background: #bbb;
 }

<table>
  <tbody>
    <tr>
      <td>1.1</td>
      <td>1.2</td>
      <td>1.3</td>
      </tr>
    <tr>
      <td>2.1</td>
      <td>2.2</td>
      <td>2.3</td>
     </tr>
    </tbody>
  </table>