table 怎么设置横向滚动条但纵向不要

Posted 2023-04-08

对网页滚动条的控制，在细部上体现了页面的成功之处。特别是首页。如果精心设计的页面，需要在没有滚动条的情况下才能充分的展现，如果没有对滚动条进行很有效的控制，那别人看起来，一定会有很多遗憾。
关于滚动条产生的原因，简单的说明一下，当宽（width）超过了浏览器默认的宽（width）的的范围，就会产生横向滚动条，纵向滚动条产生的原因也是一样的。

关于滚动条的控制，在实现上是这样的

无框架页面的控制：(非常之简单，但未于NC下测试过。那位测试过请告之。)

框架页面：在D4下，按shit+F2(菜单上：window>frames)，在frames面板中，选中需要控制滚动条的框架页面，在属性面板上将scroll的性属远为no。源代码实现起来为：

对于更精细的控制，如不出现横向的滚动条，有几种不同的办法：因为，只要width不超过浏览器默认的宽，就不会出现横向的滚动条，所以，只需要做一个width=100%的table,把所有内容都放在里面，而且那些内容的绝对宽度不超过wihtd的宽度，就可以了。但是如果超出了（例如图片的宽度），那样仍会产生滚动条，就要靠css来进一步控制了，代码如下

那样，超出的部份将被掩盖，实现了不出现横向的滚动条。对纵向的控制，也是相同的。

(附：OVERFLOWER---css中的定位属性：

overflow

属性值：visible|hidden|scroll|auto

默认值：visible

不适用于百分比值。

overflow属性决定了元素的内容在超越它的宽度和高度限制时，浏览器如何处理。在使用"visible"的情况下，不论宽和高声明为多少，超出部份都要被强制显示；当属性值为"hidden"时，任何超出原先声明的宽和高的部份，都会变得不可见，正好和"visible"相反。设为"auto"时，将按实际情况，提供一组滚动条。最后"scroll"属性值是无论在什么情况，都出现滚动条。)

总的来说，要实现对滚动条的控制，是非常简单的，只需要区分一下是否框架页，然后选用相应的属性就可以了。容易弄错的就是一些朋友在对无框架页面的控制上，也用“scrolling”这个属性。当然，如果是用css来控制，就没有什么问题了。

最后需要强调的一点就是，如果一个页面需要滚动条才能看完的情况下，如果最消了滚动条，将有一部份内容不能被看见，取消滚动条的适用条件是应是“取消后，能看到更完整的内容！”所以，如果控制了滚动条，请写上适用于什么样的分辨率观看，谁也不会奢望做给800*600分辨下看的网页，控制了滚动条后，在640*480的分辨率下，也能取得同样好的效果。 参考技术A <script type="text/javascript">
<!--
//图片滚动函数
function picScroll(pic,direction,n)

var getArr = new Array();
var move;
var length;

if(n==undefined)
n=1
else
n = 2*n-1;

switch(direction)

case 'top':

if(pic[0].offsetHeight<=(1/n)*pic[0].scrollTop)

pic[0].scrollTop -=n*pic[0].offsetHeight
else
pic[0].scrollTop +=1;

break;

case 'left':

if(pic[0].offsetWidth<=(1/n)*pic[0].scrollLeft)

pic[0].scrollLeft -=n*pic[0].offsetWidth
else
pic[0].scrollLeft +=1;

break;

case 'right':

break;

case 'bottom':

break;

default:
//默认是left
if(pic[0].offsetWidth<=pic[0].scrollLeft)

pic[0].scrollLeft -=pic[0].offsetWidth
else
pic[0].scrollLeft +=1;

break;



//-->
</script>

<style>
.pic-wap
height:160px;
margin:0;
width:650px;
margin:0px 0 0 40px;
overflow:hidden;

.pic-in
width:300%;

.pic-wap dl
float:left;
width:105px;
height:113px;
margin:0px;
padding-left: 13px;
padding-right: 12px;
background-image: url(images/ykt/pic_bj.jpg);
height:150px;
background-repeat: no-repeat;
background-position: center;

.pic-wap dt
height:40px;width:105px;
line-height:40px;
text-align:center;
font-size:12px;
font-weight:bold;
color:#555;

.pic-wap dt a
font-size:12px;
font-weight: normal;

</style>

<div class="pic-wap" id="pic-wap">
<div class="pic-in" id="pic-in">
<div id="picture1">
<dl>
<dt>
<a href="/index.php?action=showpic&pid=41" title="few">
few </a>
</dt>
<dd>
<a href="/index.php?action=showpic&pid=41" title="few">
<img width="105" height="80" src="/uploadfiles/2011/0113/thumb/thumb_1294885360_0.jpg">
</a>
</dd>
</dl>
<dl>
<dt>
<a href="/index.php?action=showpic&pid=40" title="1uuyfrwesadf">
1uuyf<font style="font-size: 12px;">....</font> </a>
</dt>
<dd>
<a href="/index.php?action=showpic&pid=40" title="1uuyfrwesadf">
<img width="105" height="80" src="/uploadfiles/2011/0113/thumb/thumb_1294905400_0.jpg">
</a>
</dd>
</dl>
<dl>
<dt>
<a href="/index.php?action=showpic&pid=39" title="正式密钥导入暨系统集成商签约仪式">
正式密钥导<font style="font-size: 12px;">....</font> </a>
</dt>
<dd>
<a href="/index.php?action=showpic&pid=39" title="正式密钥导入暨系统集成商签约仪式">
<img width="105" height="80" src="/uploadfiles/2011/0111/thumb/thumb_1294714344_0.jpg">
</a>
</dd>
</dl>
<dl>
<dt>
<a href="/index.php?action=showpic&pid=38" title="我们的事业">
我们的事业 </a>
</dt>
<dd>
<a href="/index.php?action=showpic&pid=38" title="我们的事业">
<img width="105" height="80" src="/uploadfiles/2011/0111/thumb/thumb_1294714232_0.jpg">
</a>
</dd>
</dl>
<dl>
<dt>
<a href="/index.php?action=showpic&pid=36" title="为荣誉而工作">
为荣誉而工<font style="font-size: 12px;">....</font> </a>
</dt>
<dd>
<a href="/index.php?action=showpic&pid=36" title="为荣誉而工作">
<img width="105" height="80" src="/uploadfiles/2011/0111/thumb/thumb_1294713870_0.jpg">
</a>
</dd>
</dl>
</div>
<div id="picture2"></div>
</div>
</div>

<script>
//这是图片展示的脚本start
var pic=$('.new #pic-wap');
var pic1 = pic.find('#picture1');
var pic2 = pic.find('#picture2');
pic2.html(pic1.html());

timers=setInterval("picScroll(pic,'left')",scrollSpeed);
$('.new #pic-wap').hover(
function()
clearInterval(timers);
,
function()
timers=setInterval("picScroll(pic,'left')",scrollSpeed);

);
</script>本回答被提问者和网友采纳 参考技术B 看看div的position属性是不是absolute

Vue 设置内容滚动 并且隐藏滚动条

参考技术A 设置子视图超出父试图之后滚动
overflow-x: scroll;设置滚动
flex-direction: row;横向布局
&::-webkit-scrollbar
width: 0;
设置滚动条为0
flex-shrink: 0;禁止压缩