<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控制－表格表头固定,内容多时滚动内容的更多相关文章

  1. 纯CSS实现table表头固定（自创备忘）

    因为之前约定时候产品没说要表头固定,这次迭代测试突然提出这个需求,而且不知道因为什么未知原因非要这样不可--因为之前用了table标签做表单,而且也没用插件,这下就难了点,找另外一个前端前辈妹子商量了 ...

  2. js控制固定div和随屏滚动div兼容多浏览器和纯css控制（来自网络）

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  3. table表格宽度固定，同时td内容过长也不会被撑开

    table表格宽度固定,同时td内容过长也不会被撑开,设置如下css: table{table-layout:fixed;word-break:break-all;}

  4. html css 如何将表头固定（转）

    html css 如何将表头固定 position属性取值为fixed时,则元素的位置将不受滚动条的影响,而是直接依据窗口定位,这就是将表头固定的最直接方法,网上其他途径感觉都是在走弯路.但是与此同时 ...

  5. CSS控制表格（table）样式

    CSS控制表格样式 /* 合并边框重叠部分 */ table{border-collapse:collapse;} /* 单元格边框 */ td{border:1px solid #A7AEB1;}

  6. html css 如何将表头固定

    position属性取值为fixed时,则元素的位置将不受滚动条的影响,而是直接依据窗口定位,这就是将表头固定的最直接方法,网上其他途径感觉都是在走弯路.但是与此同时必须解决两个问题.第一:表体将随之 ...

  7. 纯CSS控制背景图片100%自适应填充布局

    https://blog.csdn.net/wd4java/article/details/50537562 解决:   html,body{height: 100%;width: 100%;marg ...

  8. CSS控制表格嵌套

    网页设计应用中,当我们不能完全放弃表格的使用时,为了达到预期的效果,不免要用到表格嵌套(特别是多层嵌套)方式来进行布局.可能很多同仁都遇到过这样的问题,为了达到显示效果要为每一个(每一层)的表格写不同 ...

  9. 一、纯css实现顶部进度条随滚动条滚动

    一.效果图 二.直接复制粘贴 <!DOCTYPE html> <html lang="en"> <head> <meta charset= ...

随机推荐

  1. java内存设置

    在上边红色框内加入java内存设置命令: -Xms128m -Xmx512m -XX:PermSize=128m -XX:MaxPermSize=512m

  2. [No00001F]阅读速度如何快一点、再快一点？-不知道读啥？试试这些电影剧本！

    少侠萌好,还记得包大人给大家推荐过的语感培养大法——“电影剧本阅读法”吗?最近,包大人陆陆续续收到了好几位少侠的实践报告,他们中不少人抱怨:“大人,你明明说过电影剧本篇幅短.用词简单的,可为什么我还是 ...

  3. 关于Xcode7.2版本访问相册问题

    前些天自己将xcode升级到7.2版本后,在我写的代码中有需要访问到相册的功能,但是却发现被告知无权限 一开始以为是手机问题,在设置里面找也没有找到,然后看代码,但是代码也没问题,后来才发现是我的pl ...

  4. Jenkins 安装

    1. 调整tomcat的jvm配置, 以免内存不够, 在catalina.sh中 #!bin/sh下添加 JAVA_OPTS="-server -Xms1024m -Xmx1024m -XX ...

  5. Java数据类型和变量

    Java中存在2种数据类型,下面我们来详解一下: 基本数据类型: 引用数据类型: 可以用一张表来记录: 基本数据类型 整型 byte:1个字节8位,取值范围为:[-128, 127],直接写值:(by ...

  6. Windbg调优Kafka.Client内存泄露

    从来没写过Blog,想想也是,工作十多年了,搞过N多的架构.技术,不与大家分享实在是可惜了.另外,从传统地ERP行业转到互联网,也遇到了很所前所未有的问题,原来知道有一些坑,但是不知道坑太多太深.借着 ...

  7. K-means算法及文本聚类实践

    K-Means是常用的聚类算法,与其他聚类算法相比,其时间复杂度低,聚类的效果也还不错,这里简单介绍一下k-means算法,下图是一个手写体数据集聚类的结果. 基本思想 k-means算法需要事先指定 ...

  8. HTML5+JS 《五子飞》游戏实现（六）鼠标响应与多重选择

    上一章我们提到了如果有多条线上的棋子可以被吃掉,那么游戏需要提示用户,让用户选择吃哪条线上的.另外因为是网页游戏,所以一定要实现鼠标单击棋子可以进行操作. 当鼠标移动棋子上面后,切换鼠标指针为手形,移 ...

  9. JavaScript面试题收集（一）

    简述javascript中的“=.==.===”的区别? 答:=赋值 ==比较是否一般相等   "3"==3 //会做类型的隐式转换,true ===比较是否严格相等 " ...

  10. Socket网络编程--FTP客户端

    Socket网络编程--FTP客户端(1)(Windows) 已经好久没有写过博客进行分享了.具体原因,在以后说. 这几天在了解FTP协议,准备任务是写一个FTP客户端程序.直接上干货了. 0.了解F ...