javascript - 表格覆盖标签

Question

我正在制作甘特图式应用程序，每天使用表格作为网格。当其中一天被分配时，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>

绿色的前两行效果很好。标签溢出显示全名。我添加了第 4 行，它可以正确显示。然而，问题来自第三行。该名称比分配给它的所有天数都长，因此它溢出到空的 td 中。

所以唯一没有正确显示的是第 3 行。溢出应该被隐藏，所以它只显示“lon”。

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

Answer 1

您可以在白色单元格上使用 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>

注意:边框样式有一些问题