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

Question

有一个包含3列的表格。 现在我想将第一列设置为100px宽，第二列设置为200px宽，最后一列设置为300px宽。
将所有td都设置一个id来表示它是哪一列，这样做很麻烦。
是否有更明智的方法？

- showkey

---

你尝试使用element:last-child {...}选择器了吗？ - Robert

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>

- jack

Answer 2

你可以使用 CSS 中的 nth-child 来实现这个功能:

#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）..

- Ant

Answer 3

你可以使用 nth-child 来实现这个功能：

table tr td {
  padding:0;  
}
table tr td:nth-child(1) {
  width:100px;
}
table tr td:nth-child(2) {
  width:200px;
}
table tr td:nth-child(3) {
  width:300px;
}

<table>
  <tr>
    <td>100px</td>
    <td>200px</td>
    <td>300px</td>
  </tr>
</table>

提示：列宽比 CSS 中定义的宽度要宽，因为有默认的单元格填充。要移除填充，您可以使用额外的 CSS 规则（在此示例中规则为 table tr td）。

- Sebastian Brosch