Question

我已阅读以下内容：

-autoformatting-1。 HTML table: keep the same width for columns

-autoformatting-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>

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

-autoformatting-2。 Set the table column width constant regardless of the amount of text in its cells?

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

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

我已经进行了一些网络搜索，博客建议的答案与第一个答案相同，但是无效。

我还尝试设置thead中第一个单元格（th）的宽度。那也没什么。

我丢失了某些东西还是Firefox损坏了？

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

Answer 1

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

您会有类似的内容：

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>

我认为这是处理您案件的方法。

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

1 个答案: