<html>
<head>
<SCRIPT type=text/javascript src="../../jquery/jquery-2.0.1.min.js"></SCRIPT>
<style type="text/css">
/*所有内容都在这个DIV内*/
div.all {
border: 1px solid #4BB3E2;
width: 100%; /*这个宽度可根据实际需要改变*/
clear: right;
}
/*表头在这个DIV内*/
div.title {
width: 100%;
background-color: #4BB3E2;
}
/*内容在这个DIV内*/
div.content {
width: 100%;
overflow: scroll; /*总是显示滚动条*/
overflow-x: hidden; /*去掉横向滚动条*/
height: 200px;
}
div.title_left {
float: left;
margin-right: 17px;
}
div.content_left {
float: left;
}
.main_table {
width: 100%;
border: 1px solid #4BB3E2;
border-collapse: collapse; /*边线与旁边的合并*/
table-layout:fixed;
}
.main_table tr th {
border: 1px solid #4BB3E2;
background-color: #4BB3E2;
font-size:14px; line-height:35px; background:#4BB3E2; border:solid 1px #BEE5F9;
overflow: hidden; /*超出长度的内容不显示*/
/*word-wrap: break-word; 内容将在边界内换行,这里显示省略号,所以不需要了*/
word-break: break-all; /*字内断开*/
text-overflow: ellipsis; /*当对象内文本溢出时显示省略标记(…),省略标记插入的位置是最后一个字符*/
white-space: nowrap;
}
/*单元格样式*/
.main_table tr td {
border: 1px solid #4BB3E2;
overflow: hidden;
/*word-wrap: break-word; 内容将在边界内换行,这里显示省略号,所以不需要了*/
word-break: break-all;
text-overflow: ellipsis;
white-space: nowrap;
text-align: left;
}
</style>
</head>
<body>
<div class="all">
<div class="title">
<div class="title_left">
<table class="main_table">
<tr>
<th>姓名</th><th style="width:30%">年龄</th><th>性别</th><th>班级</th>
</tr>
</table>
</div>
</div>
<div class="content">
<div class="content_left">
<table class="main_table" id="taskInfo_tbId">
<tr>
<td>aaaaaaaaaaaaaa</td><td style="width:30%">aaaaaaaaaaaaa</td><td>cccccccccccc</td><td>bbbbbbbbbbbbbbbbb</td>
</tr>
<tr>
<td>aaa</td><td>aaa</td><td>ccc</td><td>bbb</td>
</tr>
<tr>
<td>aaa</td><td>aaa</td><td>ccc</td><td>bbb</td>
</tr>
<tr>
<td>aaa</td><td>aaa</td><td>ccc</td><td>bbb</td>
</tr>
<tr>
<td>aaa</td><td>aaa</td><td>ccc</td><td>bbb</td>
</tr>
<tr>
<td>aaa</td><td>aaa</td><td>ccc</td><td>bbb</td>
</tr>
<tr>
<td>aaa</td><td>aaa</td><td>ccc</td><td>bbb</td>
</tr>
<tr>
<td>aaa</td><td>aaa</td><td>ccc</td><td>bbb</td>
</tr>
<tr>
<td>aaa</td><td>aaa</td><td>ccc</td><td>bbb</td>
</tr>
<tr>
<td>aaa</td><td>aaa</td><td>ccc</td><td>bbb</td>
</tr>
<tr>
<td>aaa</td><td>aaa</td><td>ccc</td><td>bbb</td>
</tr>
<tr>
<td>aaa</td><td>aaa</td><td>ccc</td><td>bbb</td>
</tr>
<tr>
<td>aaa</td><td>aaa</td><td>ccc</td><td>bbb</td>
</tr>
</table>
</div>
</div>
</div>
<script type="text/javascript">
function setDataTbMovecss(tbid){
var objTmp = '';
$("#"+tbid+" tr").mouseover(function(){ //鼠标移动的高亮显示
$(this).css("background", "#BEE5F9");
}).mouseout(function(){
if('' != objTmp){//表示有点击
if(objTmp != this){
$(this).css("background", "#FFFFFF");
}
}else{
$(this).css("background", "#FFFFFF");
}
}).click(
function(){
if(objTmp != this){
objTmp = this;
$("#"+tbid+" tr").each(function(){
$(this).css("background", "#FFFFFF");
});
}
$(this).css("background", "#BEE5F9");
}
);
}
setDataTbMovecss("taskInfo_tbId");
</script>
</body>
</html>
分享到:
相关推荐
jQuery Table Scroll插件还支持其他高级功能,例如自定义滚动条样式、响应式设计等。在使用过程中,可以通过查阅插件的官方文档或提供的示例代码来了解更多信息。 需要注意的是,当表格数据动态加载或使用Ajax获取...
- 可以使用jQuery插件,如DataTables,它提供了更丰富的表格功能,包括自动分页、排序、过滤等,同时也支持自定义滚动条样式。 - 对于大数据量的表格,可以考虑使用虚拟滚动,只渲染视口内的行,提高性能。 - 考虑到...
其次,需要对body元素应用CSS样式,隐藏水平滚动条,但保留垂直滚动条(如果需要的话)。可以设置body的overflow-x属性为hidden,这样水平滚动条就不会出现,但body元素依然可以垂直滚动。相应的CSS样式为:body{...
为了解决"table内容出现滚动条和表头对齐问题",我们需要深入理解表格布局、CSS样式控制以及可能涉及到的JavaScript或jQuery解决方案。 首先,让我们了解一下HTML表格的基本结构。一个HTML表格由`<table>`元素开始...
总的来说,结合CSS的`position: fixed`和jQuery的事件监听及样式调整,我们可以轻松实现table表头的固定显示,使用户在滚动查看大量数据时仍能清晰地看到列标题,提升交互体验。在实际开发中,这种技术广泛应用于...
标题中的“TABLE滚动条”指的是在网页或应用中,当表格内容过多无法在单个屏幕内完全显示时,为了能够浏览表格的所有数据,所引入的一种交互元素——滚动条。滚动条通常出现在表格的右侧(水平滚动条)或底部(垂直...
"table 列可左右拖动"的功能使得用户可以根据需要调整列宽,提高用户体验,特别是当表格内容较多,需要横向滚动条时,用户可以更方便地查看和操作表格。 实现这一功能通常涉及以下几个关键知识点: 1. **...
接着,我们用CSS来设置表格的样式,特别是滚动条的样式。CSS允许我们定制滚动条的外观,使其与页面设计更加融合。以下是一些基本的CSS样式: ```css #scrollTable { width: 100%; overflow-y: auto; scrollbar-...
本文将详细介绍如何使用jQuery和JavaScript技术来实现在网页上的Table表格中,通过拖动表头来任意调整列宽度的功能,这个功能适用于各种列表页面,如数据展示、报表分析等场景。 首先,我们需要引入jQuery库,它是...
例如,它可能提供了自定义滚动条样式、多级表头固定、动态加载数据等功能。要使用这个插件,你需要在HTML文件中引入jQuery库和"superTables.js",并按照插件文档的指引配置和初始化。 总的来说,"Jquery表格添加...
3. **拖动过程**: 绑定`mousemove`事件,当鼠标移动时,计算新的宽度并更新表格列的CSS样式。 4. **结束拖动**: 绑定`mouseup`事件,停止监听鼠标移动,释放资源。 接下来,我们要解决隐藏表格内容的问题。当表格列...
接下来,我们将使用CSS来设置表格样式和滚动条效果。CSS可以用来定制滚动条的外观,例如颜色、宽度和箭头样式等。以下是一些基本的CSS代码: ```css #scrollableTable { width: 100%; overflow-y: auto; border-...
这些插件通常会监听滚动事件,计算滚动条的位置,并相应地调整固定元素的位置。 在实际应用中,这个插件可能会使用以下步骤来实现功能: 1. **初始化**:在页面加载完成后,找到表格元素,并为其添加必要的样式和...
可能需要进行的配置包括设置固定表头、指定固定列数,以及调整滚动条样式等。此外,兼容性和性能优化也是需要注意的方面,确保插件在不同浏览器和设备上都能良好运行。 综上所述,"table-scroll"插件是基于jQuery的...
此外,CSS还可以用来调整表格的滚动行为,比如使用`overflow: auto`属性来创建滚动条,并通过`position`和`z-index`控制元素的层叠顺序,确保隐藏副本在合适的时候显示。 关键在于JavaScript,它是实现无限循环的...
本资源"jQuery+EasyUI实现头部固定带滚动条table表格特效源码.zip"提供了一个使用这两者实现的特定功能:在表格数据过多时,保持表头固定,同时在页面内添加滚动条,以方便用户查看和操作。 jQuery是一个轻量级、高...