如何让 2 table 个单元格的长度相同但文本数量不同？

Question

我正在尝试为我制作的数据创建密钥 table。

我希望动态调整键的大小以占据屏幕最右边的 20%。我还希望所有 table 单元格都具有相同的长度并横跨整个键（屏幕的 20% /2 = 10%）。

如果文本超过屏幕的 10%（或 table 的 50%），我希望它在第一行的末尾被剪掉，这样它就不会扭曲关键。

我要为 css 中的空 td 设置样式并给它们背景颜色，其他 td 将描述该颜色在我的数据中代表什么 table（就像地图上的键).我的问题是，当我尝试运行这段代码时，空的 td 缩小以显示行中其他 td 的文本。

如何防止这种情况发生并强制两个 td 的长度始终相同？

.key {
  float: right;
  border-style: double;
  width: 20vw;
  white-space: nowrap;
  overflow: hidden;
}

.key td {
  width: 10vw;
  border: 1px solid #003C63;
}

<div class="key">
  <table>
    <tr>
      <td></td>
      <td> = all times</td>
    </tr>
    <tr>
      <td></td>
      <td> = some times</td>
    </tr>
    <tr>
      <td></td>
      <td> = no times</td>
    </tr>
  </table>
</div>

Answer 1

您必须设置 table 的宽度（而不是 div 环绕它）和 table-layout: fixed 样式。

我通过删除 div 并将 key class 直接添加到 table 元素来简化您的代码。

.key {
  float: right;
  border-style: double;
  width: 20vw;
  table-layout: fixed; /* <------- added */
  white-space: nowrap;
  overflow: hidden;
}

.key td {
  width: 10vw;
  border: 1px solid #003C63;
}

<table class="key">
  <tr>
    <td></td>
    <td> = all times</td>
  </tr>
  <tr>
    <td></td>
    <td> = some times</td>
  </tr>
  <tr>
    <td></td>
    <td> = no times</td>
  </tr>
</table>

如需进一步说明，请查看 Stack Overflow post：

如何让 2 table 个单元格的长度相同但文本数量不同？

How do I get 2 table cells to be the same length with different amounts of text?

html

css

overflow

tablecell