css table 设置宽度自适应

在网页布局中，表格是一个不可或缺的组件。我们经常会遇到需要设置表格宽度自适应的情况，这时候就需要用到CSS中的table布局。在CSS中，设置表格宽度自适应可以通过设置表格的width属性为100%实现，同时也需要对table-layout属性进行设置。 例如，我们可以将HTML代码如下：

<table>
  <thead>
    <tr>
      <th>Name</th>
      <th>Age</th>
      <th>Country</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Tom</td>
      <td>25</td>
      <td>USA</td>
    </tr>
    <tr>
      <td>Lucy</td>
      <td>20</td>
      <td>China</td>
    </tr>
  </tbody>
</table>

通过以下CSS代码将表格设置为宽度100%及自适应布局：

table {
  width: 100%;
  table-layout: auto;
}

这样，表格的宽度将会根据其父元素的宽度进行自适应，同时表格的列宽也会根据内容自适应调整。如果你想要手动设置表格列的宽度，可以将table-layout属性设置为fixed，然后为每一列分配一个固定的宽度。 总之，通过这种方式设置表格的宽度自适应，可以使得网页布局更加灵活，同时也方便了内容的呈现。