如何使 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 {

  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>