`
hudeyong926
  • 浏览: 2032742 次
  • 来自: 武汉
社区版块
存档分类
最新评论

div滚动条

PHP 
阅读更多

一般滚动条都是根据高度或者宽度来判断滚动

Y滚动条

<div id="wrap" style="width:1076px; height:460px; overflow-y:scroll;">
<table class="tableborder" width="100%" style="float:left">
</div>

根据数据条数的div滚动条

1.如果表格记录小于14,就不滚动,此时不用div就没有长宽的固定限制。

2.如果大于14就滚动,用div滚动

<div style="overflow:auto; height:400px; border-bottom:1px solid #999999">    
<table border="0" width="100%" cellspacing="0" cellpadding="0" class="list" id="tab1">
<tr class="tableheader">
<td width="100"></td>
</tr>
</table>
</div>

 

X轴滚动条

表格水平滚动条滚动时怎样控制表头/操作不滚动,让数据滚动

思路:设置水平滚动条的宽度<该滚动表格的宽度。

2:设置表格的行的高度style="height:30"。注意只有表格的所有列宽(<td width="40px">)<该滚动表格的宽度时固定的高度才有效。否则失效。

<table  width="100%" border="0" cellspacing="0" cellpadding="0">
<tr><td>
<div STYLE='position:relative;overflow:scroll; width:600;overflow-y:hidden'>
<table width='850' border="0" cellspacing="0" cellpadding="0" class="list">
      <tr  class="tableheader" style="height:15">
       <td width="40px">序号</td>
       <td width="90px"">申请时间</td>
       <td width="120px">申请公司</td>
       <td width="70px">联系人</td>
       <td width="100px">服务名称</b></td>
       <td width="90px">关务港口</td>
       <td width="100px">客户名称</td>
       <td width="100px">客户编码</td>
      </tr>
<?php
$tpl_comm_array=$form->commission_array;
foreach($tpl_comm_array as $key => $value){
?>
    <tr class="listcontent" onmouseover="this.bgColor='#EFF4FC'" onmouseout="this.bgColor='#ffffff'" style="height:30">
       <td><b><?php echo $tpl_comm_array[$key]['id']; ?></b></td>
       <td><?php echo $tpl_comm_array[$key]['commdate']; ?></td>
       <td><?php echo $tpl_comm_array[$key]['copname']; ?></td>
       <td><?php echo $tpl_comm_array[$key]['contact']; ?></td>
       <td><?php echo $tpl_comm_array[$key]['servname']; ?></td>
       <td><?php echo $tpl_comm_array[$key]['portname']; ?></td>
       <td><?php echo $tpl_comm_array[$key]['custname']; ?></td>
       <td><?php echo $tpl_comm_array[$key]['custcode']; ?></td>
      </tr>
<?php } ?> 
</table>
</div>
</td>
<td>
<table width="100%" border="0" cellspacing="0" cellpadding="0" class="list">
<tr  class="tableheader" style="height:15">
       <td width="100px">操作</td>
      </tr>
<?php
$tpl_comm_array=$form->commission_array;
foreach($tpl_comm_array as $key => $value){
?>
      <tr class="listcontent" onmouseover="this.bgColor='#EFF4FC'" onmouseout="this.bgColor='#ffffff'" style="height:30">
       <td align="center"><span class="ysmbotton"><a href="/Main.php?do=AdminOrder&submit=Update&order_application=<?php echo $tpl_comm_array[$key]['commid']; ?>">
       签约订单</a></span></td><td style="padding-right:10px;">
       <span class="bluesmbotton">
       <a href="/Main.php?do=OrderDisplay&order_application=<?php echo $tpl_comm_array[$key]['commid']; ?>" target="_blank">
       查看详情</a></span></td>
      </tr>
<?php } ?> 
</table>
<br>
<td>
</tr>
</table>

纵向

<div style="overflow:auto; height:400px; border-bottom:1px solid #999999;">
<div style="width:260px;height:120px; overflow-y:scroll; border:1px solid;">

 

<div style="width:798px;overflow:scroll;"> 横向

<div style="width:260px;height:120px; overflow:scroll; border:1px solid;">双向

 

让竖条消失:
<BODY STYLE='OVERFLOW:SCROLL;OVERFLOW-Y:HIDDEN'></BODY>

让横条消失:
<BODY STYLE='OVERFLOW:SCROLL;OVERFLOW-X:HIDDEN'></BODY>

 

分享到:
评论

相关推荐

    div滚动条 带滚动条的div div滚动条样式

    DIV 滚动条样式详解 在 HTML 中,我们经常需要在 DIV 元素中添加滚动条,以便在内容超出 DIV 区域时,能够滚动查看内容。这篇文章将详细介绍如何使用 CSS 样式表来实现 DIV 滚动条的样式设置。 什么是 DIV 滚动条...

    div滚动条优化

    "div滚动条优化"这个主题主要关注如何在不牺牲滚动功能的前提下,通过CSS样式和JavaScript技术来美化或定制滚动条,使其更加符合现代网页的审美标准和用户体验需求。 首先,我们要了解默认滚动条的样式通常是浏览器...

    Android手机版浏览器DIV滚动条失效解决方案

    在Android平台上,开发一款手机版浏览器时,可能会遇到一个常见的问题:在特定情况下,网页中的`div`元素的滚动条无法正常工作。这个问题通常是由于Android原生浏览器或自定义WebView组件的某些特性引起的。本文将...

    让div滚动条初始化到最低位置的三种方法

    ### 让div滚动条初始化到最低位置的三种方法 在前端开发中,有时我们需要实现一个功能,即在向某个特定的`div`容器内添加新内容后,使该`div`的滚动条自动滚动到最底部,以确保新添加的内容能够立即呈现在用户的...

    div滚动条样式一览-div+css设计网

    而当这些`div`元素中的内容超出其设定的宽度或高度时,滚动条就会出现,以帮助用户浏览不可见的部分。在本文中,我们将深入探讨如何使用CSS来定制`div`元素的滚动条样式,以提升网页的视觉效果和用户体验。 一、...

    jQuery实现将div的滚动条滚动到指定位置

    在网页开发中,jQuery是一个非常...总的来说,通过jQuery的`animate()`方法,我们可以轻松地实现div滚动条的动态控制,为用户提供更加友好的交互体验。这个功能在展示长列表、分页内容或者需要聚焦某个部分时特别有用。

    jqueryDIV滚动条

    jquery滚动条jquery滚动条jquery滚动条jquery滚动条jquery滚动条jquery滚动条jquery滚动条jquery滚动条jquery滚动条jquery滚动条jquery滚动条jquery滚动条jsDIV滚动条jsDIV滚动条jsDIV滚动条

    完美解决ASP.NET回传后div滚动条位置复位的问题

    ### 完美解决ASP.NET回传后div滚动条位置复位的问题 在ASP.NET开发过程中,经常遇到的一个问题是页面更新或回传后,原本已经滚动的`div`元素会自动复位到初始状态,这对于用户体验来说是十分不利的。本文将详细介绍...

    纯css实现table滚动条(纯css实现div滚动条)

    纯css实现table滚动条(纯css实现div滚动条),主要是通过设定高度/宽度及overflow:auto;实现.

    jquery定制div滚动条Scrollbar

    标题中的“jquery定制div滚动条Scrollbar”涉及到的是一个使用jQuery库来实现自定义滚动条功能的技术。在网页设计中,滚动条通常是浏览器默认样式,但通过jQuery插件,我们可以为div元素创建具有个性化外观和交互...

    js DIV滚动条随机位置的设置技巧.docx

    js DIV 滚动条随机位置的设置技巧 在 Web 开发中,DIV 滚动条是非常常见的交互元素,而随机设置 DIV 滚动条的位置可以增加用户体验的随机性和趣味性。今天,我们将介绍如何使用 JavaScript 实现 DIV 滚动条的随机...

    DIV滚动条设置添加 CSS滚动条显示与滚动条隐藏.docx

    ### DIV滚动条设置添加 CSS滚动条显示与滚动条隐藏 #### 概述 在Web开发过程中,滚动条的样式和行为对于提升用户体验至关重要。通过CSS(层叠样式表),开发者可以自定义滚动条的外观、行为以及是否显示或隐藏。本...

    jQuery+mousescroll.js自定义美化div滚动条插件

    "jQuery+mousescroll.js自定义美化div滚动条插件"就是这样一个工具,它旨在将传统的浏览器滚动条转变为更加符合现代审美且交互友好的元素。这款插件允许开发者轻松地自定义滚动条样式,使其与网站的设计风格保持一致...

    jQuery+mousescroll.js自定义美化div滚动条插件.zip

    《jQuery+mousescroll.js自定义美化div滚动条插件详解》 在Web开发中,滚动条虽然看似不起眼,但其设计与交互往往能够显著影响用户体验。传统的浏览器默认滚动条样式单调,不符合现代网页设计的审美需求。jQuery库...

    Div滚动条随鼠标滚动Jquery版(转)

    Div滚动条随鼠标滚动Jquery版(转)Div滚动条随鼠标滚动Jquery版(转)

    实现div滚动条默认最底部以及默认最右边的示例代码

    实现div滚动条默认最底部以及默认最右边的示例代码 在网页开发中,我们经常需要实现div滚动条默认最底部以及默认最右边的效果,以便用户可以快速地查看最新的信息内容。今天,我们将分享一个简单而实用的示例代码,...

    滚动条,div滚动条,图层下拉条

    本项目专注于“滚动条”的定制化,特别是针对`div`元素和图层下拉条的特效。通过自定义滚动条的样式和功能,可以提升网站的用户体验和视觉效果。 在HTML中,滚动条通常是自动出现的,但默认样式往往与网站的设计...

    DIV滚动悬浮层(滚动条动,层不动)

    通过这种方式,当页面滚动时,悬浮层会根据我们的需求进行动态调整,实现"滚动条动,层不动"的效果。 当然,实际的项目可能会更复杂,比如要考虑不同设备的响应式布局,或者添加动画效果等。但以上基础步骤已经涵盖...

    Div滚动条随鼠标滚动js版(由网友JQuery版改写而成)

    在网页设计中,有时我们需要对特定的`div`元素实现自定义滚动条的效果,以便增强用户体验。本项目提供了一个JavaScript版本的解决方案,该方案最初基于jQuery实现,经过修改后适用于纯JavaScript环境,解决了在IE8...

Global site tag (gtag.js) - Google Analytics