zoutuo1986
- 浏览: 178965 次
- 性别:
- 来自: 长沙
-
最新评论
-
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 2188Sep 10, 2016 10:45:15 AM org. ... -
jquery.ajax重复提交出现的error
2015-12-02 10:32 1166---IE8不会出现改错误，chrome 会出现 弹出页 ... -
负向预查的运用后笔记
2015-11-26 09:51 5531，格式(?!pattern) 2，定义 负向预查，在 ... -
读别人的js
2015-11-06 14:27 1107baidu.browser.ie = baidu.ie = ... -
达梦笔记
2015-10-25 11:29 991查询sql中的字段中不能使用关键字 除非update{ ... -
solr导入配置规则总结
2015-09-29 18:06 891<dataConfig> <dataS ... -
java.util.zip.ZipFile解析不能zip类文件(ofd)
2015-09-24 10:27 1249第三方提供了解析ofdjar包，使用的时候直接报错，发现 在 ... -
IE8下jquery.dataTables.js 无数据的cell 的值显示null
2015-06-04 14:38 1132IE8下jquery.dataTables.js 无数据的 ... -
Not valid UTF8! byte B3 in state 0
2015-06-04 10:35 41322015-06-04 10:30:40.032:WARN:o ... -
jacob编辑word_doc
2014-10-24 16:31 542POI搞docx 可以，但是搞不定doc，只有使用jacob ... -
jacob and winword.exe
2014-10-24 16:22 910public boolean writeWordFile ... -
项目中加spring 定时器 定时任务
2014-07-23 13:53 9281关键是配置 配置分为四层 bean1,org.spri ... -
WdatePicker.js没有权限
2014-07-23 13:46 5525----------------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 710java.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 28951、问题描述 在webshpere6.1.0.21部署war ... -
IWAB0503E Unable to update Java build path
2012-10-31 19:36 55011、问题描述 在Eclipse3.6中，利用wsdl文件，生 ... -
"hibernate的sqlquery" 与"sqlserver 表char类型"的矛盾
2012-09-24 15:14 1795一、问题描述 1.1、 使用hibernate的findB ... -
sqlserver2005安装、创建用户、jdbc连接过程中的点点滴滴
2012-09-21 19:43 1260项目的数据库需要从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`伪类为鼠标悬停的行或单元格添加特别...