如何在html中组成覆盖表格中各个单元格（有自己的内容）的元素？

我希望有一个表，其中一些单元格被灰色的不间断块覆盖（只覆盖单元格，而不将自身延伸到单元格之外）。单元格中的内容也应覆盖

这是相关的

不过，我不能把内容包括在内。我一直在尝试使用负责CSS中块的div元素的“position”，但效果不是没有覆盖单元格内容，就是块本身扩展到了单元格之外

javascript代码：

var x = document.createElement("table");
x.setAttribute("id", "table");
document.body.appendChild(x);
var i;
for (i = 0; i < 2; i++) { 
    var y = document.createElement("tr");
    y.setAttribute("id", 'tr' + i);
    document.getElementById("table").appendChild(y);
    var j;
    var temp;
    for (j = 0; j < 12; j++) { 
        var z = document.createElement("th");
        z.setAttribute("id", 'th' + i +j);
        var t;
        var temp;
        if(i == 0){
          t = document.createTextNode(-(12-1-j));
        }else{
          t = document.createTextNode('abc');

          temp = document.createElement('div');
          temp.setAttribute('class', 'first');
          console.log(temp)
          temp.setAttribute('id', 'shadow'+ j);
          z.appendChild(temp);
        }
        z.appendChild(t);
        document.getElementById('tr' + i).appendChild(z);        

    }

}

var x=document.createElement（“表”）；
x、 setAttribute（“id”、“table”）；
文件.正文.附件（x）；
var i；
对于（i=0；i<2；i++）{
var y=document.createElement（“tr”）；
y、 setAttribute（“id”，“tr”+i）；
document.getElementById（“表”）.appendChild（y）；
var j；
无功温度；
对于（j=0；j<12；j++）{
var z=document.createElement（“th”）；
z、 setAttribute（“id”，“th'+i+j”）；
变量t；
无功温度；
如果（i==0）{
t=document.createTextNode（-（12-1-j））；
}否则{
t=document.createTextNode（'abc'）；
temp=document.createElement（'div'）；
temp.setAttribute（'class'，'first'）；
控制台日志（临时）
临时设置属性（'id'，'shadow'+j）；
z、 儿童（临时）；
}
z、 儿童（t）；
document.getElementById（'tr'+i）.appendChild（z）；
}
}

您可以在文本中添加一个单独的类，然后使用

位置：相对

根据灰色区域定位组件

---

有关工作示例，请参考

我想我已经达到了您的要求。请参考这把小提琴：@ShubhamYerawar你可以把它作为答案。