表格表头固定,内容多时滚动内容(2)[改进版]
程序员文章站
2022-07-12 09:19:18
...
之前写过一个,把表头的固定,内容多时滚动内容: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>
上一篇： java中>与>>与>>>与<之间的区别
下一篇： BRDF Explained