Css Firefox中未显示的每个表格单元格的框阴影

我需要使用：before伪元素为每个表单元格生成框阴影。它在除firefox之外的所有浏览器中都能完美运行

html

---

您真的需要阴影出现在伪元素上吗？如果你只是把阴影放在td上，你可以得到同样的效果，而且它应该可以跨浏览器工作

CSS:

---

这不适用于伪元素的原因是，根据规范tds、trs等不能包含绝对定位的元素。当您试图绝对地将一个元素定位到一个元素中时，它可能在某些浏览器中工作，但我不相信规范定义了这种行为。因此浏览器处理它的方式可能会有所不同。看起来基于Webkit的浏览器会尝试将td视为块级元素，其中as Gecko并不在意，而是将其放置在第一个有效的包含元素上。

为什么将shadow设置为：before pseudoclass？JSFIDLE代码也缺少我需要的开始标记。为什么这个问题被搁置？绝对定位元素不能在表中，也不能在表单元格中包含绝对定位元素，在本例中，绝对元素的：：before从整个表中获取定位坐标，而不是从其父-相对-td通过：：pseudo元素框阴影，但是如果你直接把它放到td中，它会工作的。c表td{moz盒阴影：插入0.04pxRGBA0,0,0,1；-webkit盒阴影：插入0.04pxRGBA0,0,0,1；盒阴影：插入0.04pxRGBA0,0,0,0,1；}有一个小的视觉差异。

<table class="c-table ">
    <tr class="th">
        <td>column1</td>
        <td>column2</td>
        <td>column3</td>
    </tr>
    <tr>
        <td>row1</td>
        <td>row2</td>
        <td>row3</td>
    </tr>
    <tr>
        <td>row4</td>
        <td>row5</td>
        <td>row6</td>
    </tr>
    <tr>
        <td>row7</td>
        <td>row8</td>
        <td>row9</td>
    </tr>
    <tr>
        <td>row10</td>
        <td>row11</td>
        <td>row12</td>
    </tr>
</table>

.c-table tr > td {
    position: relative;
    padding: 5px;
}
.c-table td:before {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    content:'';
    -moz-box-shadow: inset 0 0 4px rgba(0, 0, 0, 1);
    -webkit-box-shadow: inset 0 0 4px rgba(0, 0, 0, 1);
    box-shadow: inset 0 0 4px rgba(0, 0, 0, 1);
}

.c-table td {
    -moz-box-shadow: inset 0 0 4px rgba(0, 0, 0, 1);
    -webkit-box-shadow: inset 0 0 4px rgba(0, 0, 0, 1);
    box-shadow: inset 0 0 4px rgba(0, 0, 0, 1);
}