如何在html中组成覆盖表的单个单元格(它有自己的内容)的元素？

Question

我想要一张桌子，它的一些细胞被灰色的不透明块覆盖(它只覆盖细胞，而不延伸到细胞之外)。细胞中的内容也应包括在内。

这是相关的JSFiddle。

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

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);        

    }

}

Answer 1

可以向文本中添加单独的类，然后使用position:relative将组件相对于灰色区域定位。

有关工作示例，请参阅这把小提琴