如何使 2 个表格单元格的长度相同但文本量不同？

Question

我正在尝试为我制作的数据表创建一个键。

我希望按键的大小能够动态调整以占据屏幕最右边的 20%。我还希望所有表格单元格的长度相同并延伸到整个按键（屏幕的 20% /2 = 10%）。

如果文本长度超过屏幕的 10%（或表格的 50%），我希望将其剪裁在第一行的末尾，这样就不会扭曲键。

我将在 css 中设置空 td 的样式并为它们提供背景颜色，其他 td 将描述该颜色在我的数据表中代表什么（就像地图上的键）。我的问题是，当我尝试运行此代码时，空的 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

您必须设置表格的宽度（而不是包裹它的 div）和样式table-layout: fixed。我通过删除 div 并将key类直接添加到表元素来简化您的代码。.key {&nbsp; float: right;&nbsp; border-style: double;&nbsp; width: 20vw;&nbsp; table-layout: fixed; /* <------- added */&nbsp; white-space: nowrap;&nbsp; overflow: hidden;}.key td {&nbsp; width: 10vw;&nbsp; border: 1px solid #003C63;}<table class="key">&nbsp; <tr>&nbsp; &nbsp; <td></td>&nbsp; &nbsp; <td> = all times</td>&nbsp; </tr>&nbsp; <tr>&nbsp; &nbsp; <td></td>&nbsp; &nbsp; <td> = some times</td>&nbsp; </tr>&nbsp; <tr>&nbsp; &nbsp; <td></td>&nbsp; &nbsp; <td> = no times</td>&nbsp; </tr></table>