Question

我正在尝试添加功能区/突出显示表格中特定单元格的方法。我找到了一些功能区的代码，但我不能让它与我的桌子一起工作。

现在，我只想在单元格中找到一个正方形，我希望功能区进入

功能区的代码：

thead th p.promo { font-size: 1em; color: #fff; position: absolute; top: 9em; left: -17px; z-index: 1000; width: 100%; margin: 0; padding: .625em 17px .75em; background: #c00; box-shadow: 0 2px 4px rgba(0,0,0,.25); border-bottom: 1px solid #900; }

thead th p.promo:before { content: ""; position: absolute; display: block; width: 0px; height: 0px; border-style: solid; border-width: 0 7px 7px 0; border-color: transparent #900 transparent transparent; bottom: -7px; left: 0; }
thead th p.promo:after { content: ""; position: absolute; display: block; width: 0px; height: 0px; border-style: solid; border-width: 7px 7px 0 0; border-color: #900 transparent transparent transparent; bottom: -7px; right: 0; }

Answer 1

您的jsFiddle（额外的233字符）上的}行的CSS出错了。

该错误导致您的CSS规则：

thead th {
  position: relative;
}

不要渲染。修复错误后，position: relative将起作用并修复功能区的位置。

编辑：实际上，233行下的任何内容都无法渲染。不仅是定位，还有功能区上的整个定义。

检查一下： https://jsfiddle.net/4xwzuqpn/3/

如何定位CSS功能区以覆盖一个表格单元格

1 个答案: