冻结头直到Irrelevant（HTML，CSS和JS） [英] Freeze Header until Irrelevant (HTML, CSS and JS)

问题描述

我有几个不同的表，我想垂直向下显示一个页面。麻烦的是，不同的表有不同的列标题。

在图片中，黑边框表示视口。红色边框是红色标题所在的位置，但注意它是冻结到视口的顶部。这是真实的，直到在第二图像中，绿色标题开始替换它。

在这里，我修复了打嗝文本。当标题变得固定时，我改变placholder的高度。

旧邮件
在这里，您可以使用go man：

http://jsfiddle.net/BCtP8/

对于可能出现的任何问题，我很抱歉对于整个网络开发场景，我没有预测可能发生的经验。

我怀疑这是最好的或最有效的方法，所以如果你觉得更好，请张贴在这里，所以我可以学习。谢谢。

I have a few different tables that I want to display vertically down a page. The trouble is, the different tables have different column headings.

In the picture, the dark border represents the viewport. The dotted red border is where the red header belongs but note that it is "frozen" to the top of the viewport. This is true until, in the second image, the green header begins to replace it. http://imagebin.org/172108

Does anyone know how this could be accomplished using very lightweight scripting (In other words, I don't want JQuery or something) and CSS. I have the advantage that I only need it to render on Webkit (which means some css3 is also an option). I don't care if the headers are not actually part of the html <table> - they must obviously just line up properly though.

解决方案

edit: http://jsfiddle.net/BCtP8/3/

There, I fixed the hiccuping text. When the header becomes fixed, I change the placholder's height. I also changed it to work with any header height, not just the one I had given them.

OLD POST Here you go man:

http://jsfiddle.net/BCtP8/

Sorry for any problems that might occur, I'm quite new to the whole web developing scene and I don't have the experience to predict what might happen.

I doubt this is the best or most efficient way to do it, so if you find better, please post it here so I can learn. Thanks.

这篇关于冻结头直到Irrelevant（HTML，CSS和JS）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！