之前写过一个,把表头的固定,内容多时滚动内容:http://redstarofsleep.iteye.com/blog/1010569
当时表格的宽度是固定的,而且滚动条永远在最右边,如果表格的宽度不是具体的像素值,而是百分比,那种方法貌似就不太灵光了啊,所以这次重新写了一个.
思路还是有一些区别的,效果上的改进是把滚动条靠到了表格边上,然后表格的宽度可以是百分比,随着浏览器大小的变化自适应.以下是代码:
<html>
<head>
<style type="text/css">
/*所有内容都在这个DIV内*/
div.all {
border: 3px solid #FF00FF;
width: 80%; /*这个宽度可根据实际需要改变*/
clear: right;
}
/*表头在这个DIV内*/
div.title {
width: 100%;
}
/*内容在这个DIV内*/
div.content {
width: 100%;
overflow: scroll; /*总是显示滚动条*/
overflow-x: hidden; /*去掉横向滚动条*/
height: 100px;
}
div.title_left {
float: left;
margin-right: 17px;
}
div.content_left {
float: left;
}
.main_table {
width: 100%;
border: 1px solid #FF00FF;
border-collapse: collapse; /*边线与旁边的合并*/
table-layout:fixed;
}
.main_table tr th {
border: 1px solid #FF00FF;
overflow: hidden; /*超出长度的内容不显示*/
/*word-wrap: break-word; 内容将在边界内换行,这里显示省略号,所以不需要了*/
word-break: break-all; /*字内断开*/
text-overflow: ellipsis; /*当对象内文本溢出时显示省略标记（…），省略标记插入的位置是最后一个字符*/
white-space: nowrap;
}
/*单元格样式*/
.main_table tr td {
border: 1px solid #FF00FF;
overflow: hidden;
/*word-wrap: break-word; 内容将在边界内换行,这里显示省略号,所以不需要了*/
word-break: break-all;
text-overflow: ellipsis;
white-space: nowrap;
}
</style>
</head>
<body>
<div class="all">
<div class="title">
<div class="title_left">
<table class="main_table">
<tr>
<th>aaa</th><th style="width:30%">aaa</th><th>ccc</th><th>bbb</th>
</tr>
</table>
</div>
</div>
<div class="content">
<div class="content_left">
<table class="main_table">
<tr>
<td>aaa</td><td style="width:30%">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>
<tr>
<td>aaa</td><td>aaa</td><td>ccc</td><td>bbb</td>
</tr>
</table>
</div>
</div>
</div>
</body>
</html>
分享到：
相关推荐
例如，版本3.1.3可能是当时的一个稳定版本，提供了更稳定的表头固定效果和可能的性能改进。 在安装和使用Table Enhancer时，用户需要注意以下几点： 1. **安装**：将`tableenhancer-3.1.3.jar`文件上传到...
这个插件主要用于改进Ext Grid的用户体验，特别是处理大量数据时，通过列锁定和多表头功能，使得用户能够更有效地浏览和操作数据。 首先，"列锁定"是Ext Grid中一个非常实用的功能，特别是在显示宽广、多列的数据表...
"JS锁定表头锁定列1.4"是一个针对这种情况的解决方案，它允许用户在滚动表格内容时保持表头和左侧列固定，提供更好的用户体验。这个库是用原生JS编写的，因此无需依赖任何第三方库，如jQuery，这有助于减小页面加载...
在之前的版本中，当表格内容过多导致滚动时，表头可能会随着内容一起滚动，造成用户体验不佳。在Bootstrap Table 1.15.5中，开发团队修复了这个问题，引入了表头固定的特性，使得表头在用户滚动页面时始终保持在顶部...
在Android开发中，双向表格是一种常见的布局方式，它允许用户在水平和垂直方向上滚动数据，为用户提供更灵活的数据展示。本项目“Android双向表格可滑动可双向适配”着重于实现这样的功能，并在此基础上增加了自定义...
通过设置这一属性，可以使得表格视图中的头部单元格在用户滚动表格时保持固定位置，从而实现标题滚动的效果。此外，UIBubbleTableView还提供了额外的自定义选项，如改变标题背景颜色、字体大小和样式等，以适应不同...
3. `Position: sticky`让元素可以在滚动时保持固定位置，常用于创建固定表头或侧边栏。 4. ` calc()`函数允许动态计算长度值，适应不同屏幕尺寸。 此外，HTML5还引入了离线存储`<applicationCache>`、画布`<canvas>...
- **详细内容**: 指导用户如何设置重复标题行，以便在表格滚动时始终显示标题。 **8. 快速计算文档表格中的数据** - **知识点**: 利用表格功能进行简单的数据计算。 - **详细内容**: 介绍了如何在表格中进行加减...
2. **多固定列**：在Ehlib 4.5.55中，DBgrid 支持固定列，即使在滚动时也能保持某些关键列可见。这有助于用户始终能查看到重要的参照信息，如员工ID或日期等，而不必不断滚动。 3. **按表头排序**：用户现在可以...
5. **固定列**：在横向滚动时，可以将重要的列固定在屏幕左侧，确保关键信息始终可见。 6. **编辑功能**：提供行内编辑和弹出式编辑模式，便于用户对数据进行增删改查操作。 7. **过滤功能**：允许用户根据列值筛选...
易语言5.0测试版3相对于测试版2更新内容： 1. 支持设置程序(EXE)图标 2. 支持设置使用通用组件库6.0 3. 支持“链接后动作(post_link_action)”（参见tools\link.ini中注释） 4. 重新整理所有官方支持库的静态库...
在表格场景中，我们通常会在表头（thead）部分应用此属性，使其在滚动时保持在可视区域顶部。 以下是一个基本的实现步骤： 1. 首先，确保浏览器支持`position: sticky`。虽然现代浏览器大部分已经支持，但老版本的...
此外，它还支持多固定列，即使在滚动时也能保持关键列可见，提高用户界面的可用性。 3. 按表头排序：Ehlib 的 DBGrid 控件允许用户通过点击表头进行数据排序，这对于数据浏览和分析非常有用。用户可以快速根据一列...
6. **行列冻结**：可以固定表头或某些列，使得滚动时仍能保持重要信息可见。 7. **高性能优化**：EhLib的组件经过优化，即使处理大量数据，也能保持流畅的性能。 8. **事件驱动编程**：EhLib控件提供了丰富的事件...
- 新版本采用了更稳定的方法来实现固定标题栏和边栏，这使得用户在滚动表格时，标题栏和边栏仍然可见，提升了用户体验。 ##### 2. 排序方式更新 - 支持更多类型的排序，包括数字、字符、日期、数字字符混合以及中文...
`vueTableFixSelf` 可能是一个基于Vue.js开发的开源表格插件，专门用于处理固定表头、列宽等与表格显示相关的问题。这个插件可能在原有基础上进行了定制，以满足特定项目的需求，因此涉及到了源码的修改。 源码修改...