html怎么给table添加滚动条

html怎么给table添加滚动条,第1张

1<!--div比table大小要小才会显示-->

2<div style="overflow-x: auto; overflow-y: auto; height: 100px; width:200px;">

3 <table id="table" border="1" align="center" width="300px" height="200px">

4 <tbody>

5 <tr><td>00</td><td>01</td><td>02</td><td>03</td><td>04</td><td>05</td></tr>

6 <tr><td>10</td><td>11</td><td>12</td><td>13</td><td>15</td><td>15</td></tr>

7 <tr><td>20</td><td>21</td><td>22</td><td>23</td><td>24</td><td>25</td></tr>

8 <tr><td>30</td><td>31</td><td>32</td><td>33</td><td>34</td><td>35</td></tr>

9 </tbody>

10</table>

11 </body>

12 </div>

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:absolute;height:200;width:200;overflow:auto;background:#EEEEEE;">

<p>pppppppppppppppppppppppppppppppppppppppppppppppppp </p>

<p>pppppppppppppppppppppppppppppppppppppppppppppppppp </p>

<p>ppppppppppppppppppppppppp </p>

<p>ppppppppppppppppppppppppp </p>

<p>ppppppppppppppppppppppppp </p>

<p>ppppppppppppppppppppppppp </p>

<p>ppppppppppppppppppppppppp </p>

<p>ppppppppppppppppppppppppp </p>

<p>ppppppppppppppppppppppppp </p>

<p>ppppppppppppppppppppppppp </p>

<p>ppppppppppppppppppppppppp </p>

<p>ppppppppppppppppppppppppp </p>

</div>

</td>

</tr>

<tr>

<td colspan="2" align="right">

<span onmouseover='scrollb=setInterval("winsscrollLeft-=10",100)'

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

<span onmouseover='scrollb=setInterval("winsscrollTop-=10",100)'

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

<span onmouseover='scrollb=setInterval("winsscrollLeft+=10",100)'

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

<span onmouseover='scrollb=setInterval("winsscrollTop+=10",100)'

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

</td>

</tr>

</table>

</BODY>

</HTML>

<style type="text/css">

<!--

#Layer1 {

position:absolute;

width:196px;

height:198px;

z-index:1;

overflow-x:hidden;

overflow-y:scroll

}

-->

</style>

<table width="400" height="400" border="1" align="center" cellpadding="0" cellspacing="0">

<tr bgcolor="#999966">

<td width="100" height="100"> </td>

<td width="200" height="100"> </td>

<td width="100" height="100"> </td>

</tr>

<tr>

<td width="100" height="200" bgcolor="#999966"> </td>

<td width="200" height="200" align="left" valign="top"><div id="Layer1">文字内容文字内容文字内容文字内容文字内容文字内容文字内容文字内容文字内容文字内容文字内容文字内容文字内容文字内容文字内容文字内容文字内容文字内容文字内容文字内容文字内容文字内容文字内容文字内容文字内容文字内容文字内容文字内容文字内容文字内容文字内容文字内容文字内容文字内容文字内容文字内容文字内容文字内容文字内容文字内容文字内容文字内容文字内容文字内容文字内容文字内容文字内容文字内容文字内容文字内容文字内容文字内容文字内容文字内容文字内容文字内容文字内容文字内容文字内容文字内容文字内容文字内容文字内容文字内容文字内容文字内容文字内容文字内容文字内容文字内容文字内容文字内容文字内容文字内容文字内容文字内容文字内容文字内容文字内容文字内容文字内容文字内容 </div></td>

<td width="100" height="200" bgcolor="#999966"> </td>

</tr>

<tr bgcolor="#999966">

<td width="100" height="100"> </td>

<td width="200" height="100"> </td>

<td width="100" height="100"> </td>

</tr>

</table>

Dreamweaver 8如何给框架集添加滚动条?

只要右边有滚动条 要在设计试图完成要求

<frameset rows="210%,300%,50%" cols="" frameborder="0" style="overflow:scroll;" >

<frame src="tophtml" name="topFrame" scrolling="no" marginheight="0" noresize="true" marginwidth="0"/>

<frame src="zhonghtml" name="leftFrame" scrolling="auto" marginwidth="0" noresize="true" marginheight="0" />

<frame src="footerhtml" name="footerFrame" scrolling="auto" marginwidth="0" noresize="true" marginheight="0"/>

</frameset>

<noframes></noframes>

在frameset 标签内加上style="overflow:scroll;"这个样式就可以出现右边的整页滚动条了

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

原文地址:https://www.54852.com/bake/13492857.html

(0)
打赏 微信扫一扫微信扫一扫 支付宝扫一扫支付宝扫一扫
上一篇 2025-09-01
下一篇2025-09-01

发表评论

登录后才能评论

评论列表(0条)

    保存