htmltable为什么会横排显示呢_IT百科

列过多时会出现table横向溢出。页面Model嵌套一个动态table，table列根据后台数据动态渲染，不固定，当列过多时会出现table横向溢出。加横向滚动条：overflow-x：auto；能解决横向溢出问题。思路如下：

1、table的外层div样式设置为横向内容大于div宽度时变成滚条的形式并且宽度设置一个初始值：overflow-x：auto；width：660px。

2、每次浏览器尺寸发生改变时，获取一次Modle的宽度，根据Model的宽计算出table外层div的宽度，改变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: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>

隐藏竖向滚动条

在子页面的<html>标签里加入以下格式:<htmlstyle="overflow:autooverflow-y:hidden">,

style="overflow:auto"，当内容超出范围之后，就会自动有滚动条了。

设置div横向滚动条div<style="overflow:scroll"></div>

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

htmltable为什么会横排显示呢