具有凸起列效果的HTML表

Question

我对HTML表格提出了一些挑战，我们需要提升列。如果你查看附图，你会明白我的意思。 这些凸起列的目的是引起用户对它们的注意。

问题是：

1. 要使色谱柱的效果高于其他色谱柱 需要某种元素/高度/边距出现在外面 表的边界，似乎不起作用
2. 同样适用于底层
3. 要使阴影正确显示，需要将其应用于列中的所有单元格。

我们确实通过将其拆分为多个表然后将样式应用于应该是凸起列的表来实现此功能。我附加的图像实际上是一个像这样工作的实时表。 但是，你放弃了表格的所有其他所需功能......

1. 如果文本在表1中包装但不在表中，则行高不匹配 表2。
2. 为了处理行高问题，我们对每个表的行应用了固定的高度，但是你必须强制文本不要换行。如果你然后得到的文字长于你遇到麻烦的宽度。

有没有人知道如何在不拆分表的情况下实现这一目标？

谢谢， 雅克

Answer 1

尝试为标题行上方的表格添加额外的行（您可能必须停止使用任何th标记）以在顶部为您提供纵横投标。类似地，对于底部，额外突出显示行。

虽然你不得不妥协一下这个表，但是在我的书中比分成2个表更好，因为这会破坏表标签的所有目的;显示一个表，并轻松声明该表。

表中的效果最好用jquery完成，除非突出显示的列的选择完全是静态的，在这种情况下考虑通过适当地生成html来呈现静态html版本。