javascript - 表格叠加标签

我每天都使用表格作为网格制作甘特图式应用程序。分配一天的时间后，将为td分配一个类，该类将其颜色更改为正在使用的资源。我试图在标签上放一个标签，以显示分配的资源，如下面的示例所示。

table {
  table-layout: fixed;
  border-collapse: collapse;
  width: 100px;
}

td {
  height: 20px;
  width: 20px;
  border: black solid 1px;
}

.green {
  background-color: green;
}

.red {
  background-color: red;
}

<table>
  <tbody>
    <tr>
      <td class="green">sdfsdfsfsdfs</td>
      <td class="green"></td>
      <td class="green"></td>
      <td class="green"></td>
      <td></td>
    </tr>
    <tr>
      <td></td>
      <td></td>
      <td class="green">te</td>
      <td class="green"></td>
      <td></td>
    </tr>
    <tr>
      <td></td>
      <td></td>
      <td class="red">longstring</td>
      <td></td>
      <td></td>
    </tr>
    <tr>
      <td></td>
      <td></td>
      <td class="red">longstring</td>
      <td class="red"></td>
      <td class="red"></td>
    </tr>
  </tbody>
</table>

绿色的前两行效果很好。标签溢出显示全名。我添加了第四行，它可以正确显示。但是问题出在第三行。该名称比分配的所有名称都长，因此会溢出到空的td中。

因此，唯一无法正确显示的行是第三行。溢出应该被隐藏，因此只显示“lon”。

是否有CSS技巧可以阻止溢出到具有不同背景/类的区域？或者，也许是一个防止在最后td上溢出的JavaScript解决方案？

最佳答案

您可以在白色单元格上使用z-index并在彩色单元格上分配位置static以获取所需的内容。

现场演示:

table {
  table-layout: fixed;
  border-collapse: collapse;
  width: 100px;
}


td {
  height: 20px;
  width: 20px;
  border: black solid 1px;
}

td {
  z-index: 9;
  background-color: white;
  position: relative;
}

.green {
  position: static;
  background-color: green;
}

.red {
  position: static;
  background-color: red;
}

<table>
  <tbody>
    <tr>
      <td class="green">sdfsdfsfsdfs</td>
      <td class="green"></td>
      <td class="green"></td>
      <td class="green"></td>
      <td></td>
    </tr>
    <tr>
      <td></td>
      <td></td>
      <td class="green">te</td>
      <td class="green"></td>
      <td></td>
    </tr>
    <tr>
      <td></td>
      <td></td>
      <td class="red">longstring</td>
      <td></td>
      <td></td>
    </tr>
    <tr>
      <td></td>
      <td></td>
      <td class="red">longstring</td>
      <td class="red"></td>
      <td class="red"></td>
    </tr>
  </tbody>
</table>

注意:边框样式有些麻烦