Javascript 表格覆盖标签

我正在制作一个甘特图esqe应用程序，使用表格作为每天的网格。当分配一天时，

td

将被分配一个类别，该类别将根据所使用的资源改变其颜色。我试着在顶部放置一个标签，显示分配了哪些资源，如下面的示例所示

表格{
表布局：固定；
边界塌陷：塌陷；
宽度：100px；
}
运输署{
高度：20px；
宽度：20px；
边框：黑色实心1px；
}
格林先生{
背景颜色：绿色；
}
瑞德先生{
背景色：红色；
}

SDFSDfsDfs
te
长线
长线

您可以在白色单元格上使用

z-index

，并在彩色单元格上指定位置

static

，以获得所需内容

现场演示：

表格{
表布局：固定；
边界塌陷：塌陷；
宽度：100px；
}
运输署{
高度：20px；
宽度：20px；
边框：黑色实心1px；
}
运输署{
z指数：9；
背景色：白色；
位置：相对位置；
}
格林先生{
位置：静态；
背景颜色：绿色；
}
瑞德先生{
位置：静态；
背景色：红色；
}

SDFSDfsDfs
te
长线
长线

溢出：隐藏

@Matt.S

溢出：隐藏不工作，因为它会停止第一行的工作。除非你的意思是只在最后一个
td
上这样做，但我可能不一定知道它是不是，所以你只希望它旁边有相同颜色的
td
s时溢出？@Matt.s是的。我将对问题进行编辑，使其更清楚。我可以将其缩短为省略号，但这仅限于最后一个
tr
。我用另一个测试用例编辑了这个问题，以澄清我的意思。@TomDee我更新了，border出现了一些问题。如果有问题就告诉我