css table 宽度固定宽度自适应

当使用CSS来控制table的宽度时，有两种常用的方法。第一种是使用固定宽度，第二种是使用自适应宽度。

table { 
  width: 100%; 
}

th,td { 
  padding: 10px; 
  text-align: left; 
}

th { 
  background-color: #333; 
  color: white; 
}

tr:nth-child(even) { 
  background-color: #f2f2f2; 
}

固定宽度很容易理解，就是给table一个明确的宽度，这样table所包含的列的宽度也就确定下来了。使用固定宽度的table可以使得表格看起来更整齐，排列得更规律。

与之相对的是自适应宽度，也称之为流式布局。这种布局方式使用百分比来控制table的宽度，所以table的宽度会随着浏览器窗口的大小而变化。

table { 
  width: 100%; 
}

th,td { 
  padding: 10px; 
  text-align: left; 
}

th { 
  background-color: #333; 
  color: white; 
}

tr:nth-child(even) { 
  background-color: #f2f2f2; 
}

td { 
  width: 25%; 
}

当我们想要同时实现固定宽度和自适应宽度时，可以给每一列指定特定的宽度，而保持table同时具有自适应的能力。这种方式适用于我们需要保证表格每一列的大小然而又希望整个表格能够适应不同尺寸才能的情况。

总之，在我们开发网页时，控制table的样式是一项非常重要的工作。如果你需要创建一个表格，记得使用CSS来掌控表格的宽度。