CSS 表格宽度设为100%，最后一列填充剩余空间，而不会挤压其他列的内容/宽度

在本文中，我们将介绍如何使用CSS将表格的宽度设为100%，并使最后一列填充剩余空间，同时不会挤压其他列的内容和宽度。我们将提供一些示例代码来帮助您更好地理解和应用这些技巧。

阅读更多：CSS 教程

设置表格宽度为100%

在CSS中，要将表格的宽度设为100%，我们可以使用width: 100%样式规则。这将使表格在其容器中水平扩展，占据全部可用空间。以下是一个示例：

<table style="width: 100%;">
  <tr>
    <th>列1</th>
    <th>列2</th>
    <th>列3</th>
  </tr>
  <tr>
    <td>内容1</td>
    <td>内容2</td>
    <td>内容3</td>
  </tr>
</table>

在上面的示例中，<table>元素的style属性将表格的宽度设置为100%。这将使表格的每一列平均分配容器的可用空间。

最后一列填充剩余空间

要使最后一列填充剩余空间，我们可以使用CSS的table-layout属性。将该属性设置为fixed可以让表格根据列定义的宽度来布局。以下是一个示例：

<table style="width: 100%; table-layout: fixed;">
  <colgroup>
    <col style="width: 33%;">
    <col style="width: 33%;">
    <col style="width: auto;">
  </colgroup>
  <tr>
    <th>列1</th>
    <th>列2</th>
    <th>列3</th>
  </tr>
  <tr>
    <td>内容1</td>
    <td>内容2</td>
    <td>内容3</td>
  </tr>
</table>

在上面的示例中，我们使用<colgroup>元素来定义每一列的宽度。width: 33%表示前两列平均分配表格宽度的33%，而width: auto表示最后一列根据剩余空间自动调整。

不挤压其他列的内容/宽度

为了确保最后一列不会挤压其他列的内容和宽度，我们可以使用CSS的overflow属性。通过将该属性设置为hidden，我们可以隐藏最后一列超出其容器宽度的内容。以下是一个示例：

<style>
  .overflow-hidden {
    width: 100%;
    table-layout: fixed;
  }
  .overflow-hidden th,
  .overflow-hidden td {
    overflow: hidden;
  }
</style>

<table class="overflow-hidden">
  <colgroup>
    <col style="width: 33%;">
    <col style="width: 33%;">
    <col style="width: auto;">
  </colgroup>
  <tr>
    <th>列1</th>
    <th>列2</th>
    <th>列3</th>
  </tr>
  <tr>
    <td>内容1</td>
    <td>内容2</td>
    <td>内容3内容3内容3内容3内容3内容3内容3内容3内容3内容3内容3内容3内容3内容3内容3内容3内容3内容3内容3内容3内容3内容3</td>
  </tr>
</table>

在上面的示例中，我们创建了一个名为.overflow-hidden的CSS类，并将overflow: hidden应用于表格的表头和表格单元格。这将确保表格内容不会超出其容器的宽度，从而避免挤压其他列的内容和宽度。

总结

通过使用CSS的width: 100%来设置表格宽度为100%，并结合使用table-layout: fixed、<colgroup>和overflow: hidden属性，我们可以实现将表格的最后一列填充剩余空间，同时不会挤压其他列的内容和宽度。希望本文提供的示例和技巧能帮助您在设计和开发表格时实现所需的布局和效果。