html - 具有凸起列效果的 HTML 表格

Question

我有一个 HTML 表格的挑战，我们需要有凸起的列。如果您查看随附的图像，您会明白我的意思。 这些凸起的列的目的是引起用户对它们的注意。

问题是：

1. 要获得列高于其他列的效果，您需要某种元素/高度/边距出现在表格边界之外，这似乎不起作用
2. 底部也一样
3. 要正确显示投影，需要将其应用于列中的所有单元格。

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

1. 如果文本在表 1 中换行但在表 2 中不换行，则行高不匹配。
2. 为了解决行高问题，我们对每个表格的行应用了固定高度，但是您必须强制文本不换行。如果你得到的文本比宽度长，你就会遇到麻烦。

有谁知道如何在不拆分表格的情况下实现这一点？

谢谢，雅克

Answer 1

尝试在标题行上方的表格中增加一行（您可能必须停止使用任何th标签），以便在顶部为您提供上栏。同样对于底部，一个额外的突出显示行。

尽管您必须对表格进行一些妥协才能做到这一点，但在我的书中，这比分成 2 个表格更好，因为这违背了表格标签的所有目的；显示一个表格，并轻松声明该表格。

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