表格列中相同宽度的单元格？

Question

我已阅读以下内容：

-自动格式化-1。 HTML table: keep the same width for columns

-自动格式化-1。 “如果您设置样式表布局：固定；在您的表格上，您可以覆盖浏览器的自动列调整大小。然后浏览器将根据表格第一行中单元格的宽度设置列宽。” - 这在 Firefox 66.0.4 中不起作用，对我来说从来没有。查看https://jsfiddle.net/x342vchn/：

table {
  table-layout: fixed;
}

td {
  border: 1px solid #000;
  overflow: hidden;
  overflow-wrap: break-word;
}

.narrow {
  max-width: 20px; /* Without this, the first table doesn't work either! */
  width: 20px;
}

<table>
  <tbody>
    <tr>
      <td class="narrow">sdkajdwaudawjdjawhdwjahdawjdhajh</td>
      <td>hi</td>
    </tr>
    <tr>
      <td>hi</td>
      <td>hi</td>
    </tr>
  </tbody>
</table>

<table>
  <tbody>
    <tr>
      <td class="narrow">hi</td>
      <td>hi</td>
    </tr>
    <tr>
      <td>sdkajdwaudawjdjawhdwjahdawjdhajh</td>
      <td>hi</td>
    </tr>
  </tbody>
</table>

第一个表格“有效”，因为宽内容位于具有最大宽度限制的单元格中。第二个表忽略所有内容。

-自动格式化-2。 Set the table column width constant regardless of the amount of text in its cells?

-自动格式化-2。在这种情况下，答案建议在所有单元格上设置相同的宽度。

如果我想为一行中的单元格设置相同的高度，我可以用一行中的一个类来定位它们。那么如何在不专门设置所有受影响单元格的最大宽度和宽度的情况下为列中的单元格设置相同的 fixed 宽度？

我进行了一些网络搜索，博客建议与第一个答案相同，但它不起作用。

我也尝试过在头中设置第一个单元格 (th) 的宽度。这也没什么区别。

是我遗漏了什么还是 Firefox 坏了？

目前，我在一定宽度的所有单元格上使用相同的类，即使它们是空的，因为内容可以用 JS 修改。

Answer 1

您是否尝试过使用 col/colgroup 方法 (https://developer.mozilla.org/en-US/docs/Web/HTML/Element/col) 并设置宽度属性？

你会有类似这样的东西：

td {
  border: 1px solid #000;
}

<table>
    <tbody>
        <col width="40px" />
        <col width="20px" />
        <tr>
            <td>hi</td>
            <td>hi</td>
        </tr>
        <tr>
            <td>hi</td>
            <td>hi</td>
        </tr>
    </tbody>
</table>

我认为这是处理你的案子的方法。