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

【问题标题】：How to set different column in table to be different width in css?如何在css中将表格中的不同列设置为不同的宽度？
【发布时间】：2016-10-19 22:52:54
【问题描述】：

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

【问题讨论】：

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

标签： html css

【解决方案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>

【讨论】：

【解决方案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)..

【讨论】：

【解决方案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）。

【讨论】：