css表格表头一起滚动,纯css控制－表格表头固定,内容多时滚动内容(示例代码)

简介这篇文章主要介绍了纯css控制－表格表头固定,内容多时滚动内容(示例代码)以及相关的经验技巧，文章约5656字，浏览量299，点赞数3，值得参考！

* {

margin: 0;

padding: 0;

}

/*所有内容都在这个DIV内*/

.all {

width: 100%;

border: 1px solid #000000;

}

/*表头在这个DIV内*/

.title {

width: 500px; /*这个宽度需要与下面的内容的DIV相等*/

}

/*表格样式*/

table {

width: 100%; /*撑满上面定义的500像素*/

border: 1px solid #FF00FF;

border-collapse: collapse; /*边线与旁边的合并*/

table-layout:fixed;

}

/*表头单元格(这里将表头单元格的样式设置成了和单元格一样,实际中可以改变)*/

table tr th {

border: 1px solid #FF00FF;

overflow: hidden; /*超出长度的内容不显示*/

/*word-wrap: break-word; 内容将在边界内换行,这里显示省略号,所以不需要了*/

word-break: break-all; /*字内断开*/

text-overflow: ellipsis; /*当对象内文本溢出时显示省略标记(…)，省略标记插入的位置是最后一个字符*/

white-space: nowrap;

}

/*单元格样式*/

table tr td {

border: 1px solid #FF00FF;

overflow: hidden;

/*word-wrap: break-word; 内容将在边界内换行,这里显示省略号,所以不需要了*/

word-break: break-all;

text-overflow: ellipsis;

white-space: nowrap;

}

/*容纳表格内容的DIV,这个DIV上放置滚动条*/

.content {

width: 100%;

height: 100px; /*定一下高度,要不然就撑出来没滚动条了*/

overflow: scroll; /*总是显示滚动条*/

}

/*真正存放内容的DIV*/

.content div {

width: 500px; /*与表头的DIV宽度相同*/

}

Operate	Date	Acknowledge	Other1	Other2	Other3

Operate	Date	Acknowledge	Other1	Other2	Other3
Operate	Date	Acknowledge	Other21	Other22	Other3
Operate	Date	Acknowledge	Other31	Other32	Other3
Operate	Date	Acknowledge	Other41	Other42	Other3
Operate	2011-12-12 12:22:34 9987	Acknowledge	Other51	Other52	Other3hhhhhhhhhhhhhhhhhhhhhhhhaa