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

Question

我正在尝试添加功能区/一种方式来突出显示我的表格中的特定单元格。我找到了功能区的一些代码，但我无法将其用于我的表格。

目前我只是在单元格中得到一个正方形我想让丝带进入

这是 fiddle https://jsfiddle.net/4xwzuqpn/2/

功能区代码:

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/