纯css控制－表格表头固定,内容多时滚动内容
<html>
<head>
<style type="text/css">
* {
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宽度相同*/
}
</style>
</head>
<body>
<div class="all">
<div class="title">
<table>
<tr>
<th style="width:10%">Operate</th>
<th style="width:20%">Date</th>
<th style="width:25%">Acknowledge</th>
<th style="width:15%">Other1</th>
<th style="width:15%">Other2</th>
<th>Other3</th>
</tr>
</table>
</div>
<div class="content">
<div>
<table>
<tr>
<td style="width:10%">Operate</td>
<td style="width:20%">Date</td>
<td style="width:25%">Acknowledge</td>
<td style="width:15%">Other1</td>
<td style="width:15%">Other2</td>
<td>Other3</td>
</tr>
<tr>
<td>Operate</td>
<td>Date</td>
<td>Acknowledge</td>
<td>Other21</td>
<td>Other22</td>
<td>Other3</td>
</tr>
<tr>
<td>Operate</td>
<td>Date</td>
<td>Acknowledge</td>
<td>Other31</td>
<td>Other32</td>
<td>Other3</td>
</tr>
<tr>
<td>Operate</td>
<td>Date</td>
<td>Acknowledge</td>
<td>Other41</td>
<td>Other42</td>
<td>Other3</td>
</tr>
<tr>
<td>Operate</td>
<td>2011-12-12 12:22:34 9987</td>
<td>Acknowledge</td>
<td>Other51</td>
<td>Other52</td>
<!--每个td上都要加个title,鼠标放上去时显示全部内容,我这里偷懒就写了一个-->
<td title="Other3hhhhhhhhhhhhhhhhhhhhhhhhaa">Other3hhhhhhhhhhhhhhhhhhhhhhhhaa</td>
</tr>
</table>
</div>
</div>
</div>
</body>
</html>
纯css控制－表格表头固定,内容多时滚动内容的更多相关文章
- 纯CSS实现table表头固定（自创备忘）
因为之前约定时候产品没说要表头固定,这次迭代测试突然提出这个需求,而且不知道因为什么未知原因非要这样不可--因为之前用了table标签做表单,而且也没用插件,这下就难了点,找另外一个前端前辈妹子商量了 ...
- js控制固定div和随屏滚动div兼容多浏览器和纯css控制（来自网络）
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- table表格宽度固定，同时td内容过长也不会被撑开
table表格宽度固定,同时td内容过长也不会被撑开,设置如下css: table{table-layout:fixed;word-break:break-all;}
- html css 如何将表头固定（转）
html css 如何将表头固定 position属性取值为fixed时,则元素的位置将不受滚动条的影响,而是直接依据窗口定位,这就是将表头固定的最直接方法,网上其他途径感觉都是在走弯路.但是与此同时 ...
- CSS控制表格（table）样式
CSS控制表格样式 /* 合并边框重叠部分 */ table{border-collapse:collapse;} /* 单元格边框 */ td{border:1px solid #A7AEB1;}
- html css 如何将表头固定
position属性取值为fixed时,则元素的位置将不受滚动条的影响,而是直接依据窗口定位,这就是将表头固定的最直接方法,网上其他途径感觉都是在走弯路.但是与此同时必须解决两个问题.第一:表体将随之 ...
- 纯CSS控制背景图片100%自适应填充布局
https://blog.csdn.net/wd4java/article/details/50537562 解决: html,body{height: 100%;width: 100%;marg ...
- CSS控制表格嵌套
网页设计应用中,当我们不能完全放弃表格的使用时,为了达到预期的效果,不免要用到表格嵌套(特别是多层嵌套)方式来进行布局.可能很多同仁都遇到过这样的问题,为了达到显示效果要为每一个(每一层)的表格写不同 ...
- 一、纯css实现顶部进度条随滚动条滚动
一.效果图 二.直接复制粘贴 <!DOCTYPE html> <html lang="en"> <head> <meta charset= ...
随机推荐
- [No00000C]Word快捷键大全 Word2013/2010/2007/2003常用快捷键大全
Word对于我们办公来说,是不可缺少的办公软件,因为没有它我们可能无法进行许多任务.所以现在的文员和办公室工作的人,最基础的就是会熟悉的使用Office办公软件.在此,为提高大家Word使用水平,特为 ...
- 1，字符是否为空，2，比较两个字符大小。String.Compare(String, String)。string.IsNullOrEmpty（string）
1, String.Compare 方法 (String, String) 比较两个指定的 String 对象. 值 条件 小于零 strA 小于 strB. 零 strA 等于 strB. 大于零 ...
- CSS3线性渐变和径向渐变
background:linear-gradient(to top left, blue,orange);//从右下角往左上角渐变 background:radial-gradient(to top ...
- shenben语录
1.别让别人的一句话将你击垮! 2.任何人都不能替你做决定,除了你自己! 3.对于省选: 想去就去,文化课什么的都不是问题. 如果不去,二十年后的自己一定会后悔的.
- SQL Server 用SSMS查看依赖关系有时候不准确，改用代码查
SQL Server 用SSMS查看依赖关系有时候不准确,明明某个sp中有用到表tohen,查看表tohen的依赖关系的时候,却看不到这个sp 用代码查看方式如下: --依赖于表tohen的对象 SE ...
- int,long,unsigned的值范围
unsigned int 0-4294967295 int 2147483648-2147483647 unsigned long 0-4294967295long 2147483 ...
- javascript 位运算
位运算博大精深,本文总结下基本的位运算的概念. 1.整数的二进制码 位操作符用于在最基本的层次上,即按内存中表示数值的位来操作数值.ECMAScript中的所有数值都以IEEE-754 64位格式存储 ...
- 高性能JavaScript 循环语句和流程控制
前言 上一篇探讨了达夫设备对于代码性能的影响,本文主要探讨并且测试各种常见的循环语句的性能以及流程控制中常见的优化. 循环语句 众所周知,常用的循环语句有for.while.do-while以及for ...
- SQL2005SP4补丁安装时错误: -2146233087 MSDTC 无法读取配置信息。。。错误代码1603的解决办法
是在安装slq2005sp3和sp4补丁的时候碰到的问题. 起先是碰到的错误1603的问题,但网上搜索的1603的解决办法都试过了,google也用了,外文论坛也读了,依然没有能解决这个问题. 其实一 ...
- ajax 跨域提交数据
$.ajax({ url:"http://my.demo.com/jsonp/server.php",//不同域的文件; cache: false, //是否使用缓存; error ...