如何使用 css 在 <table> 中制作一列具有固定宽度，另一列具有自动宽度？

Question

我正在制作一个具有可调整大小的列的表格，并面临一个无法解决的问题。我需要允许用户拖动列的一侧来调整其大小，并根据需要重置宽度。通过调整其大小，用户可以更改表格中每列的宽度，并将

table-layout

设置为

fixed

，效果完美，但我无法实现重置。

当用户重置某一特定列时，应将其重置为其内容的宽度（即最大单元格的宽度，如果将

table-layout

设置为

auto

则会得到该宽度）。我不明白如何实现它并保留其他列的宽度。

例如，如果有两列：A 和 B。当

table-layout

设置为

auto

时，A 的宽度为 200px，B 的宽度为 250px。用户无法将

table-layout

设置为

auto

来调整列的大小，因为列的宽度不会低于其最小值，因此我将

table-layout

设置为

fixed

。现在，用户可以调整它们的大小，例如，A 为 100px，B 为 150px。当用户想要重置 B 列以匹配其内容的宽度时，我该怎么办？我无法将

table-layout

设置回

auto

，因为它会影响 A 列。我也无法将 B 的宽度设置回 250px，因为内容可能已被用户更改。我无法将宽度设置为

auto

，因为它不适用于

table-layout

为

fixed

。

我能想到的是，使用js，将

table-layout

设置为

auto

，获取B列的宽度并保存它，将

table-layout

切换回

fixed

并将B列设置为保存的宽度。但是，拜托，这个解决方案看起来不太好。

如果有帮助，我正在使用 ant-design 的表格

Answer 1

根据您的要求，我创建了一个示例，希望这个 HTML 表格结构对您有用。

table {
          border-collapse: collapse;
        }

        table th{
            background-color: antiquewhite;
        }
      
        table, th, td {
          border: 1px solid #000; /* Add a 1px border to the table, th, and td elements */
          padding: 10px;
        }

<table id="resizable-table">
        <colgroup>
          <col style="width: 100px;" />
          <col style="width: 250px;" />
          <col style="width: 150px;" />
        </colgroup>
        <thead>
          <tr>
            <th>Column A</th>
            <th>Column B</th>
            <th>Column C</th>
          </tr>
        </thead>
        <tbody>
            <tr>
                <td>Column A</td>
                <td>Column B</td>
                <td>Column C</td>
            </tr>
        </tbody>
      </table>