如何在css中将表中的不同列设置为不同的宽度？

Question

有一个表包含3列.现在我想设置第一列100px宽度,第二列200px和最后一列300px.
将所有td设置为具有哪个列的内容是一个尴尬.
有更明智的方法吗？

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>

Answer 2

您可以使用 nth-child 在 CSS 中执行此操作：

#myTable tr td {
  border: 1px solid #000;
}

#myTable tr td:first-child {
  width: 100px;
}
#myTable tr td:nth-child(2) {
  width: 200px;
}
#myTable tr td:last-child {
  width: 300px;
}

<table id="myTable">
<tr>
  <td>100px</td>
  <td>200px</td>
  <td>300px</td>
</tr>
</table>

如果超过 3 列，您可以只指定 nth-child(x)..