javascript - 如何在不使用位置属性的情况下重叠表格(td)文本

Question

在这里，我在显示 inline-block 属性中遇到了问题。在我的场景中，我需要在 td 元素内添加 2 个跨度和文本。当我使用它时，文本会换行到下一行。 这里我需要文本重叠到 span 中，即 span 不应该干扰 td 的文本内容。我不想使用位置属性。这是我的简单演示。

table {
  border-collapse: collapse;
  width: 200px;
}

table tr td {
  border: 1px solid;
}

span.leftspan {
  display: inline-block;
  width: 50%;
  height: 20px;
  background-color: skyblue;
}

span.rightspan {
  display: inline-block;
  width: 40%;
  height: 20px;
  background-color: red;
}

<table>
  <tr>
    <td><span class="leftspan"></span><span class="rightspan"></span>12</td>
    <td><span class="leftspan"></span><span class="rightspan"></span>25</td>
  </tr>
</table>

在演示中，2 个数字 (12, 25) 不应换行到下一行。我需要实现这个没有位置属性。

Answer 1

在 td 元素上使用 display:flex 并在包含数字的元素中使用 flex-grow: 1 将使该元素填充父 td 元素。然后您可以使用 translateX 变换使它们重叠。检查this answer有关 flex 和 flex-grow 如何的额外信息。

table {
  border-collapse: collapse;
  width: 200px;
}

table tr td {
  border: 1px solid;
  display: flex;
}

span.leftspan {
  display: inline-block;
  width: 50%;
  height: 20px;
  background-color: skyblue;
}

span.rightspan {
  display: inline-block;
  width: 40%;
  height: 20px;
  background-color: red;
}

span.rest {
  flex-grow: 1;
  transform: translateX(-100%)
}

<table>
  <tr>
    <td><span class="leftspan"></span><span class="rightspan"></span><span class="rest">12</span></td>
    <td><span class="leftspan"></span><span class="rightspan"></span><span class="rest">25</span></td>
  </tr>
</table>