jsp页面中如何固定表格标题,表格的内容用垂直滚动条?

jsp页面中如何固定表格标题,表格的内容用垂直滚动条?,第1张

和html是一样的,需要加入frame 和 frameset

<frameset rows="64," cols="" framespacing="0" frameborder="yes" border="0">

<frame src="topjsp" name="topFrame" scrolling="NO" noresize >

<frame src="index2jsp" name="mainFrame">

</frameset>

</frameset>

追问: 就是html做的一个table,我一行显示的字段太多了,超出了屏幕,就是想让table的前几列固定,当滚动条左右滑动时,前几列位置不变。有没有现成的属性实现,或者用css?或者js?怎么实现?不知道我描述的是否清楚。 回答: 你把你这个页面的代码发给我 我看一下 就知道你想要什么效果了 追问: 我这个页面代码太复杂了。举个例子把:我想让下面这个table前3列固定<div id = "scrolDiv" style="width: 60%; overflow: auto; cursor: default; display: inline; position: absolute; height: 20%;"> <table><tr><td colspan = "6" align = "center">商业运行动态</td></tr><tr><td>商业企业</td><td align = "center" width = "10%">到货量</td><td align = "center" width = "10%">分拣打码量</td><td align = "center" width = "10%">零售户退货量</td><td align = "center" width = "10%">商商调剂量</td><td align = "center" width = "10%">库存量</td></tr><tr><td align = "left">北京市烟草公司</td><td align = "right">10034</td><td align = "right">10034</td><td align = "right">10034</td><td align = "right">10034</td><td align = "right">10034</td></tr><tr><td align = "left">北京市烟草公司</td><td align = "right">10034</td><td align = "right">10034</td><td align = "right">10034</td><td align = "right">10034</td><td align = "right">10034</td></tr></table></div> 回答: 你可是想让表格的宽和高都是固定的尺寸?

一般table表格带滚动条,那么头部就得固定但是直接给第一行tr给position:fixed是无法实现的,只能另外单独再写一行table对其下面表格来实现(给你再给个js插件看看)

你的意思是 表头跟着一起竖向滚动?

因为你的表头和表体是同一个div 你在这个div里设置了overflow:auto; 如果你不想让表头一起滚动,只能给表体包裹一个div 给他设置overflow:auto;,

table外层加个div,写上高宽,然后出滚动条

<div style="height: 500px;width: 600px;overflow: scroll;">

<table>

</table>

</div>

类似这样的

这种固定导航的效果,很多电商例如淘宝,都会有。

我说说他们的实现方法。

一,js算scroll的高度,就是滚动条滚了多高。

二,算悬浮的导航距离顶部的高度。

三,window的时候,对比这两个高度,如果一大于二,那么导航加个fixed。(IE7以上都有效)

然后用js处理下IE6就行。

建议去搜下相关js代码,我一般都用jQuery写。

你想要的table的头部也是一个道理,但是thead没办法fixed吧?

所以弄2个table吧,1个table放头部内容,1个table放具体内容。

另外,expression慎用,消耗浏览器资源不是一点两点。

欢迎分享,转载请注明来源:内存溢出

原文地址: http://outofmemory.cn/bake/12154299.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2023-05-21
下一篇 2023-05-21

发表评论

登录后才能评论

评论列表(0条)

保存