[分享]css中如何设置列宽

CSS中如何设置列宽在Web开发中，常常需要设置表格的列宽。在CSS中，我们可以使用属性width来设置列的宽度。例如，我们有一个表格如下： 名称 数量 价格 苹果 10 2.00 橘子 5...

CSS中如何设置列宽
在Web开发中，常常需要设置表格的列宽。在CSS中，我们可以使用属性width来设置列的宽度。
例如，我们有一个表格如下：

<table>
  <tr>
    <th>名称</th>
    <th>数量</th>
    <th>价格</th>
  </tr>
  
  <tr>
    <td>苹果</td>
    <td>10</td>
    <td>2.00</td>
  </tr>
  
  <tr>
    <td>橘子</td>
    <td>5</td>
    <td>1.50</td>
  </tr>
</table> 

现在我们想要设置第一列的宽度为100px，第二列为50px，第三列为70px，我们可以在CSS中这样设置：

table {
  width: 220px; /*表格总宽度*/
}
th:nth-of-type(1) {
  width: 100px; /*第一列宽度为100px*/
}
th:nth-of-type(2) {
  width: 50px; /*第二列宽度为50px*/
}
th:nth-of-type(3) {
  width: 70px; /*第三列宽度为70px*/
} 

这里我们使用了CSS3的:nth-of-type选择器，表示选中某个元素的第n个同级元素。
这样，我们就可以轻松地设置表格中各列的宽度了。注意，设置表格列宽度时，表格宽度也要相应调整，保证列宽总和不超过表格宽度，否则会出现列内容被挤压的情况。