html 自动显示横向滚动条_随笔

overflow:scroll/*任何时候都强制显示滚动条*/

overflow:auto/*需要的时候会出现滚动条*/

overflow-x:auto/*控制X方向的滚动条*/

overflow-y:auto/*控制Y方向的滚动条*/

示例:

<HTML>

<HEAD>

<TITLE>测试表格内的滚动条</TITLE>

</HEAD>

<BODY>

<table>

<tr>

<td>表格内的滚动条:</td>

<td>

<div id="wins"

style="position:absoluteheight:200width:200overflow:autobackground:#EEEEEE">

<p>pppppppppppppppppppppppppppppppppppppppppppppppppp </p>

<p>ppppppppppppppppppppppppp </p>

</div>

</td>

</tr>

<tr>

<span onmouseover='scrollb=setInterval("wins.scrollLeft-=10",100)'

onmouseout=clearInterval(scrollb)>向左</span>

<span onmouseover='scrollb=setInterval("wins.scrollTop-=10",100)'

onmouseout=clearInterval(scrollb)>向上</span>

<span onmouseover='scrollb=setInterval("wins.scrollLeft+=10",100)'

onmouseout=clearInterval(scrollb)>向右</span>

<span onmouseover='scrollb=setInterval("wins.scrollTop+=10",100)'

onmouseout=clearInterval(scrollb)>向下</span>

</td>

</tr>

</table>

</BODY>

</HTML>

<div id="thin" style="overflow:scrolloverflow-y:hidden">细边框 border-width: thin</div>

<div id="medium" style="width:200px">宽度适中的边框 border-width: medium</div>

<div id="thick" style="overflow:hidden"><nobr>粗边框 border-width: thick</nobr></div>

第一个层实现横向滚动条。

第二个层加个固定宽度，即可

第三个层，两个方法1，使用第一个层里的横向滚动条可以实现，第二个方法见上面第三个层的演示。

-------------------

有疑问可发站内消息

先定义一个表格的默认宽度

if(body宽度小于600){

表格的父类设置css属性overflow-x，值为auto；

表格宽度赋值为设定好的宽度

}

else{

还原

}

欢迎分享，转载请注明来源：内存溢出

原文地址: http://outofmemory.cn/zaji/6116469.html

html 自动显示横向滚动条

发表评论

评论列表（0条）