`
zoutuo1986
  • 浏览: 178913 次
  • 性别: Icon_minigender_1
  • 来自: 长沙
社区版块
存档分类
最新评论

让table带上滚动条(部分隐藏td的)横向的

 
阅读更多

---隐藏table 的tbody部分右侧的部分列(模仿别人代码写的,性能有点低)

<script type="text/javascript"> 
    $(function(){ 
        var table = $('table.maintable1').each(function(){ 
            var $table = $(this).css('border-collapse','collapse'); 
            var $tbody = $table.find('tbody').eq(0); 
           // var sbPosition = {left: $tbody.position().left, top: $(this).position().top+$(this).height()}; 
            //alert($(this).position().top+"---"+$(this).height());
            var $scrollbar = $('<div class="scrollbar"/>').css({'position':'absolute', 'overflow-x':'auto',height:'15px',width:'0px'}) 
                .append($('<div/>')) 
                .appendTo($table.parent()); 
           this.onpropertychange = function(){
        	   sbPosition = {left: $tbody.position().left, top: $(this).position().top};
        	   $scrollbar.css({'top':sbPosition.top-15,'left':sbPosition.left});
           };
                 
            $table.bind('colnum',function(event, newColNum){ 
                //先设置显示的行 
                var nFirst = 0; 
                newColNum =newColNum -2;
                $tbody.find('tr').find("td[name!='trHead']").hide(); 
                $tbody.find('tr').each(function(){
                	$(this).find("td[name!='trHead']").each(function(i){
                		 if( i >= nFirst && i < nFirst + newColNum) 
                         { 
                             $(this).show(); 
                         } 
                         else
                         { 
                             $(this).hide(); 
                         } 
                	});
                });
                var scrollWidth =  $tbody.find('tr').first().find("td[name!='trHead']").length*$tbody.width()/newColNum; 
                var $sb = $scrollbar; 
                $sb.css('width',$tbody.width()); 
                $sb.find('div').eq(0).css('width',scrollWidth);
                
            }); 
             
           $scrollbar.scroll(function(){ 
                $sb = $(this); 
                var nNewIndex = Math.floor($sb.scrollLeft() / $sb.attr('scrollWidth') 
                		* $tbody.find('tr').first().find("td[name!='trHead']").length); 
                var nIndex = parseInt($tbody.attr('itemIndex') || '0'); 
                var colnum = '${baseColNum}';
                colnum = colnum-2;
                if(nIndex!=nNewIndex) 
                { 
                	$tbody.find('tr').each(function(){
                    	$(this).find("td[name!='trHead']").each(function(i){
                    		if(i >= nNewIndex && i < nNewIndex + colnum) 
                            { 
                                $(this).show(); 
                            } 
                            else
                            { 
                                $(this).hide(); 
                            } 
                    	});
                    });
                    $tbody.attr('itemIndex', nNewIndex);  
                } 
                 
                 
            }); 
           $table.trigger('colnum','${baseColNum}'); 
            
        }); 
    }); 
    </script> 

 二、发现一个问题,不为何?

问题描述:当页面顶部有下列代码时,滚动条显示不出来。

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

 三、总结:

加给table加滚动条,其实是

1、在table外,包了div,

2、将table中的多余部分隐藏掉。

3、修改div的滚动条滚动事件。

分享到:
评论

相关推荐

    bootstrap表格固定表头并且tbody部分添加滚动条

    Bootstrap表格在设计网页时是一种非常常用的组件,尤其在处理大量数据时,为了提供更好的用户体验,我们经常需要在tbody部分添加竖向滚动条,同时保持表头固定不动。这样,当用户滚动内容时,表头始终保持可见,便于...

    div和table横向和纵向滚动条问题

    这个`div`设置`overflow-x:auto`属性,使得当`table`的宽度超过`div`的宽度时,`div`会出现横向滚动条。同时,为了避免与表格内部的纵向滚动条冲突,`div`的`overflow-y`属性设置为`hidden`。此外,需要设置`div`的...

    gridview固定表头 横向滚动 纵向固定

    "GridView固定表头横向滚动纵向固定" GridView是一个基于ASP.NET的数据控件,用于显示数据表格。然而,在默认情况下,GridView的表头无法固定在屏幕上,使得用户体验不佳。为了解决这个问题,本文将介绍如何实现...

    jsp中实现带滚动条的table表格实例代码

    本文将详细介绍如何在JSP(JavaServer Pages)中实现一个带有滚动条的table表格,通过实例代码来帮助理解这一功能。 首先,让我们了解基本的HTML表格结构。在HTML中,`&lt;table&gt;`元素用于创建表格,而`&lt;tr&gt;`定义表格...

    固定Table行列滚动.zip

    "固定Table行列滚动"的主题就是针对这样的需求,它涉及到HTML表格(Table)、行(Row)和列(Col)的定位以及滚动条的实现。在网页中,我们可能需要一个表格来展示大量信息,但屏幕空间有限,这时候就需要实现表格的...

    jQuery带滚动条头部固定表格代码.zip

    在前端开发中,创建带有滚动条且头部固定的表格是一个常见的需求,特别是在数据量较大、需要横向或纵向滚动查看时。这个“jQuery带滚动条头部固定表格代码”压缩包提供了实现这一功能的解决方案,主要涉及的技术栈...

    10.html中固定table的第一列.docx

    当表格太宽,需要横向滚动时,我们希望固定第一列(或更多列)不随滚动条移动,而其他列则可以滚动。这需要我们动态地改变这些列的位置属性,使其相对于视口保持固定。 在HTML中,创建一个包含多个列的表格,可以...

    网页横纵滚动代码

    1. **新闻滚动条**:适用于网站顶部或侧边栏的新闻滚动展示。 2. **广告轮播**:用于展示多个广告或产品图片的自动切换。 3. **动态通知栏**:适合显示重要通知或更新信息。 #### 六、总结 本文通过具体实例详细...

    解决Antd Table组件表头不对齐的问题

    在使用Antd的table组件时,由于表头参数过多,于是设置了scroll属性,在其超出一定宽度后进行滚动 但是在添加了该属性之后,经常会出现表头不对齐的问题: 针对该问题Google 了一下解决方案,但大多不是很完善,为...

    HTML页面自适应宽度的table(表格)

    这时,我们需要在table元素上添加`style="table-layout:fixed;"`,这将使所有单元格的宽度根据其内容自动调整,同时强制半角字符换行。但要注意,使用`table-layout:fixed;`后,避免在tr或td中使用height属性,因为...

    JS+DIV无缝滚动代码

    `hidden`值表示如果内容被修剪,则浏览器会隐藏滚动条。 - `white-space:nowrap;`:该属性用于定义如何处理空白以及何时换行。`nowrap`值表示即使内容超出容器宽度也不换行。 #### 1.2 JavaScript基础 - **事件...

    html+js+css固定表格行列

    对于横向滚动,可以将整个表格放入一个具有固定宽度的容器,并添加`overflow-x: auto`,以实现水平滚动条。但是,由于固定表头和滚动区域的分离,可能会导致滚动同步问题。为了解决这个问题,我们可以监听滚动事件并...

    bootstrap table实现iview固定列的效果实例代码详解

    表格主体内容被包裹在一个具有滚动条的容器内,这样当内容过多时可以横向滚动。CSS中定义的样式确保了固定列与滚动内容的同步。 六、总结 通过上述实例代码详解,我们可以了解到使用Bootstrap Table结合fixed-...

    HTML 实现行、列冻结功能

    这通常涉及到计算滚动条的位置并相应地调整元素的`top`和`left`样式属性。 ```javascript $(document).ready(function() { var header = $('#header'); var left = $('#left'); // 监听主表格的滚动事件 $('#...

    两个table实现固定表头拖动时仅限表体移动

    刚开始接触asp.net,经理就让给以前的一个项目做固定表头,顾名思义,就是在一个表中,表头固定,在拖动滚动条时,仅限表体移动,但是当横向拖动滚动条时,表头也会跟随表体一起移动,就是以下效果:   我采用了两...

    CSS精美表格

    在网页设计中,CSS(Cascading Style ...总结,通过熟练运用CSS,我们可以打造出功能强大且视觉上吸引人的表格,让网页内容更易读、更具吸引力。不断探索和实践,将使你的CSS技能更加精湛,从而更好地服务于网页设计。

    固定表格表头的代码

    在网页设计中,固定表格表头是一项常见的需求,特别是在数据量大、需要横向或纵向滚动查看的场景下。固定表头可以使用户在滚动内容时始终能看到列名,从而提高数据可读性和用户体验。本篇文章将深入讲解如何实现...

    angular浏览器兼容性问题解决方案.docx

    - 使用 `div` 包裹表格,并当表格宽度超出 `div` 宽度时,开启水平滚动条。 ```css .scroll-table { width: 100%; overflow-x: scroll; } ``` - 针对表格指定宽度,使其超过外层 `div` 的宽度,以便显示滚动条...

    2021-2022计算机二级等级考试试题及答案No.11697.docx

    22. **Word滚动条**:Word文档编辑区的横向滚动条允许用户水平滚动查看文档内容。 23. **表设计视图操作**:在Access的表设计视图中,可以修改字段类型、设置索引和添加字段,但不能直接删除记录。 24. **控件禁用...

    web开发表格CSS

    例如,当屏幕宽度小于600px时,可以将表格改为横向滚动,`@media (max-width: 600px) {table {display: block; overflow-x: auto;}}`。 8. **自定义样式**:还可以使用`:hover`伪类为鼠标悬停的行或单元格添加特别...

Global site tag (gtag.js) - Google Analytics