html 怎么置顶表格,html – 顶部有固定标题的表格

因此,固定定位存在一些微妙的问题,这使得这一点特别困难.

固定元素与浏览器视点相关

声明position：fixed时,任何其他位置规则(如left或top)都会将标题相对于视口本身 – 屏幕的左上角.您也不能使用任何技巧使其相对于其父级,因为只要页面滚动它就会在同一个位置.这可能不会影响您的网页,但仍需要考虑.

固定元素在移动浏览器中无法正常工作

我不知道你的具体用例,但这是值得深思的.

固定定位从正常流动中移除元素

据我所知,这就是造成这个问题的原因.声明position：fixed时,元素实际上会突破页面元素的正常布局和位置,现在可以在自己的唯一块中工作.

从CSS2 spec(这也适用于固定定位)：

In the absolute positioning model, a box is explicitly offset with respect to its containing block. It is removed from the normal flow entirely (it has no impact on later siblings). An absolutely positioned box establishes a new containing block for normal flow children and absolutely (but not fixed) positioned descendants. However, the contents of an absolutely positioned element do not flow around any other boxes. They may obscure the contents of another box (or be obscured themselves), depending on the stack levels of the overlapping boxes.

这很好,因为你希望标题浮动在表格之上,但也很糟糕,因为在大多数浏览器中,它与表格的其余部分分开布局.

可能的修复

>如果页面上唯一的东西是您的表格,您应该能够将标题设置为使用宽度：100％并应用与表格其余部分相同的单元格宽度.但是,可能很难使大小调整得恰到好处,尤其是在调整窗口大小时.

>使用一些简单的JavaScript来显示标题.我知道你想用HTML和CSS保持这个(我通常也这样做),但是JavaScript非常合适,因为浮动标题不应该是使用网站的重要部分.它应该适用于支持它的浏览器,但那些不支持它的应该仍然可以使用该表. CSS-Tricks有一个非常好的技巧

(http://css-tricks.com/persistent-headers/),但您可以通过在您最喜欢的搜索引擎上查找“粘性表格标题”来找到其他人.