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

Question

我已阅读以下内容:

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

-自动格式化-1。 “如果您设置样式 table-layout: fixed; 在您的表格上，您可以覆盖浏览器的自动列大小调整。然后浏览器将根据表格第一行中单元格的宽度设置列宽。” - 这在 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。在这种情况下，答案建议在所有单元格上设置相同的宽度。

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

我做了一些网络搜索，博客建议与第一个答案相同，但它不有效。

我也尝试过设置 thead 中第一个单元格 (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>

我认为这是解决您的问题的方法。