HTML表格中的CSS3功能区

Question

我参考了CSS3-Tricks Ribbon tutorial的教程。

我想用CSS3调整表格中的th元素，使其看起来像教程中的功能区。

我已经设置了JSFiddle来测试它，但不幸的是我不能这样做。你能救我吗？

Answer 1

尝试将display: block提交给.ribbon，然后从表格中取消背景 这是 example 1 。

或者您可以尝试添加到表格中：position:relative和z-index:-2 这是 example 2 。

更新1
这里的宽度为100％：example 3。

更新2
的 example 4
的 example 5