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>

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

因此，唯一无法正确显示的行是第三行。应该将溢出隐藏起来，以便仅显示“ 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>

注意：边框样式有些麻烦

表格叠加标签

1 个答案: