- 浏览: 178913 次
- 性别:
- 来自: 长沙
最新评论
-
goahead2010:
没看清,原来引用错误。thanks.
response.setCharacterEncoding方法未定义 -
zoutuo1986:
原来是因为 linux系统中,有一个系统进程没有启动,而这个进 ...
weblogic_domain_启动问题
---隐藏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的滚动条滚动事件。
发表评论
-
Error finishing response ArrayIndexOutOfBoundsException 8192
2016-09-10 14:13 2187Sep 10, 2016 10:45:15 AM org. ... -
jquery.ajax重复提交出现的error
2015-12-02 10:32 1165---IE8不会出现改错误,chrome 会出现 弹出页 ... -
负向预查的运用后笔记
2015-11-26 09:51 5531,格式(?!pattern) 2,定义 负向预查,在 ... -
读别人的js
2015-11-06 14:27 1106baidu.browser.ie = baidu.ie = ... -
达梦笔记
2015-10-25 11:29 990查询sql中的字段中不能使用关键字 除非update{ ... -
solr导入配置规则总结
2015-09-29 18:06 891<dataConfig> <dataS ... -
java.util.zip.ZipFile解析不能zip类文件(ofd)
2015-09-24 10:27 1248第三方提供了解析ofdjar包,使用的时候直接报错,发现 在 ... -
IE8下jquery.dataTables.js 无数据的cell 的值显示null
2015-06-04 14:38 1131IE8下jquery.dataTables.js 无数据的 ... -
Not valid UTF8! byte B3 in state 0
2015-06-04 10:35 41312015-06-04 10:30:40.032:WARN:o ... -
jacob编辑word_doc
2014-10-24 16:31 540POI搞docx 可以,但是搞不定doc,只有使用jacob ... -
jacob and winword.exe
2014-10-24 16:22 909public boolean writeWordFile ... -
项目中加spring 定时器 定时任务
2014-07-23 13:53 9271关键是配置 配置分为四层 bean1,org.spri ... -
WdatePicker.js没有权限
2014-07-23 13:46 5524----------------IE 9 中 消息: 没有 ... -
jxl.write.biff.WritableWorkbookImpl.write(WritableWorkbookImpl.java:726)
2014-07-17 15:45 1497java.lang.ArrayIndexOutOfBound ... -
getOutputStream() has already been called for this response
2014-06-24 13:55 708java.lang.IllegalStateExcepti ... -
websphere与org.dom4j.DocumentException与GBK
2012-10-31 20:07 1505问题源头--------------------------- ... -
sun.io.MalformedInputException与webshpere6.1.0.21与spring
2012-10-31 19:34 28931、问题描述 在webshpere6.1.0.21部署war ... -
IWAB0503E Unable to update Java build path
2012-10-31 19:36 55001、问题描述 在Eclipse3.6中,利用wsdl文件,生 ... -
"hibernate的sqlquery" 与"sqlserver 表char类型"的矛盾
2012-09-24 15:14 1795一、问题描述 1.1、 使用hibernate的findB ... -
sqlserver2005安装、创建用户、jdbc连接过程中的点点滴滴
2012-09-21 19:43 1259项目的数据库需要从oracle改为sqlserve ...
相关推荐
Bootstrap表格在设计网页时是一种非常常用的组件,尤其在处理大量数据时,为了提供更好的用户体验,我们经常需要在tbody部分添加竖向滚动条,同时保持表头固定不动。这样,当用户滚动内容时,表头始终保持可见,便于...
这个`div`设置`overflow-x:auto`属性,使得当`table`的宽度超过`div`的宽度时,`div`会出现横向滚动条。同时,为了避免与表格内部的纵向滚动条冲突,`div`的`overflow-y`属性设置为`hidden`。此外,需要设置`div`的...
"GridView固定表头横向滚动纵向固定" GridView是一个基于ASP.NET的数据控件,用于显示数据表格。然而,在默认情况下,GridView的表头无法固定在屏幕上,使得用户体验不佳。为了解决这个问题,本文将介绍如何实现...
本文将详细介绍如何在JSP(JavaServer Pages)中实现一个带有滚动条的table表格,通过实例代码来帮助理解这一功能。 首先,让我们了解基本的HTML表格结构。在HTML中,`<table>`元素用于创建表格,而`<tr>`定义表格...
"固定Table行列滚动"的主题就是针对这样的需求,它涉及到HTML表格(Table)、行(Row)和列(Col)的定位以及滚动条的实现。在网页中,我们可能需要一个表格来展示大量信息,但屏幕空间有限,这时候就需要实现表格的...
在前端开发中,创建带有滚动条且头部固定的表格是一个常见的需求,特别是在数据量较大、需要横向或纵向滚动查看时。这个“jQuery带滚动条头部固定表格代码”压缩包提供了实现这一功能的解决方案,主要涉及的技术栈...
当表格太宽,需要横向滚动时,我们希望固定第一列(或更多列)不随滚动条移动,而其他列则可以滚动。这需要我们动态地改变这些列的位置属性,使其相对于视口保持固定。 在HTML中,创建一个包含多个列的表格,可以...
1. **新闻滚动条**:适用于网站顶部或侧边栏的新闻滚动展示。 2. **广告轮播**:用于展示多个广告或产品图片的自动切换。 3. **动态通知栏**:适合显示重要通知或更新信息。 #### 六、总结 本文通过具体实例详细...
在使用Antd的table组件时,由于表头参数过多,于是设置了scroll属性,在其超出一定宽度后进行滚动 但是在添加了该属性之后,经常会出现表头不对齐的问题: 针对该问题Google 了一下解决方案,但大多不是很完善,为...
这时,我们需要在table元素上添加`style="table-layout:fixed;"`,这将使所有单元格的宽度根据其内容自动调整,同时强制半角字符换行。但要注意,使用`table-layout:fixed;`后,避免在tr或td中使用height属性,因为...
`hidden`值表示如果内容被修剪,则浏览器会隐藏滚动条。 - `white-space:nowrap;`:该属性用于定义如何处理空白以及何时换行。`nowrap`值表示即使内容超出容器宽度也不换行。 #### 1.2 JavaScript基础 - **事件...
对于横向滚动,可以将整个表格放入一个具有固定宽度的容器,并添加`overflow-x: auto`,以实现水平滚动条。但是,由于固定表头和滚动区域的分离,可能会导致滚动同步问题。为了解决这个问题,我们可以监听滚动事件并...
表格主体内容被包裹在一个具有滚动条的容器内,这样当内容过多时可以横向滚动。CSS中定义的样式确保了固定列与滚动内容的同步。 六、总结 通过上述实例代码详解,我们可以了解到使用Bootstrap Table结合fixed-...
这通常涉及到计算滚动条的位置并相应地调整元素的`top`和`left`样式属性。 ```javascript $(document).ready(function() { var header = $('#header'); var left = $('#left'); // 监听主表格的滚动事件 $('#...
刚开始接触asp.net,经理就让给以前的一个项目做固定表头,顾名思义,就是在一个表中,表头固定,在拖动滚动条时,仅限表体移动,但是当横向拖动滚动条时,表头也会跟随表体一起移动,就是以下效果: 我采用了两...
在网页设计中,CSS(Cascading Style ...总结,通过熟练运用CSS,我们可以打造出功能强大且视觉上吸引人的表格,让网页内容更易读、更具吸引力。不断探索和实践,将使你的CSS技能更加精湛,从而更好地服务于网页设计。
在网页设计中,固定表格表头是一项常见的需求,特别是在数据量大、需要横向或纵向滚动查看的场景下。固定表头可以使用户在滚动内容时始终能看到列名,从而提高数据可读性和用户体验。本篇文章将深入讲解如何实现...
- 使用 `div` 包裹表格,并当表格宽度超出 `div` 宽度时,开启水平滚动条。 ```css .scroll-table { width: 100%; overflow-x: scroll; } ``` - 针对表格指定宽度,使其超过外层 `div` 的宽度,以便显示滚动条...
22. **Word滚动条**:Word文档编辑区的横向滚动条允许用户水平滚动查看文档内容。 23. **表设计视图操作**:在Access的表设计视图中,可以修改字段类型、设置索引和添加字段,但不能直接删除记录。 24. **控件禁用...
例如,当屏幕宽度小于600px时,可以将表格改为横向滚动,`@media (max-width: 600px) {table {display: block; overflow-x: auto;}}`。 8. **自定义样式**:还可以使用`:hover`伪类为鼠标悬停的行或单元格添加特别...