如何为 table 中的特定列设置固定宽度？

Question

我有 table 列：

 <table style="table-layout: fixed; width: 100%; height: 100%;">
  <tr>
    <td>Column 1</td>
    <td class="сertainColumn">Column 2</td>
    <td>Column 3</td>
  </tr>
</table>

此外，我可以动态更改页宽和 table 宽度，还可以动态更改列宽。

当我增加宽度时，列宽会按比例增加。

如何冻结特定列的宽度？

Answer 1

这很难说，看起来你只展示了 HTML 的一部分。我假设您已经在您的 CSS 中定义了 certainColumn class，其中包含类似于以下内容的内容：

.certainColumn {
    width: 100px;
}

由于您应用了 table-layout: fixed，因此第一行决定了列宽。显示的行之前可能有其他行决定列宽。

通常，header 行应用了任何固定宽度，然后为之后的每一行应用宽度。

<table ...>
    <tr>
        <th>...</th>
        <th class="thFixedWidth">...</th>
        <th>...</th>
    </tr>
    <tr>
        <td>...</td>
        <td>inherits fixed width from header column</td>
        <td>...</td>
    </tr>
</table>

<style>.thFixedWidth { width: 100px; }</style>

如何为 table 中的特定列设置固定宽度？

How can I set a fixed width for certain column in a table?

html

css

html-table