<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>

转载于:https://www.cnblogs.com/louby/p/5307968.html

纯css控制－表格表头固定,内容多时滚动内容相关推荐

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

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

  2. css方法实现表格表头固定，横向纵向可滑动

    介绍一种用css实现表格表头固定,横向纵向可滑动的方法 先用一个div把表格包起来,表格给定高宽,overflow:scroll. 然后给表头写一个黏性布局 position: sticky:top: ...

  3. 完美解决html表格表头固定存在的问题

    完美解决html表格表头固定存在的问题    当表格数据较多出现滚动条时,很多地方都有固定表头的需求.在网上查找资料,发现了一个比较简洁的方法. 代码如下: 1.css样式: th{backgroun ...

  4. CSS控制表格——制作日历

    表格是网页上最常见的元素,除了用它来显示数据,还常被用来排版.这一次我们就来学习如何用CSS控制表格.一.表格中的标记表格(<table>标记)在最初HTML设计时,仅仅是用来存放各种数据 ...

  5. CSS控制表格的方法

    现在的网页都是DIV+CSS来布局的,table布局时代早已经结束了,那table还能干什么呢? 当然是现实数据了,这才是他的本事! 表格框架要和CSS分离,还table纯结构,需要琢磨一下,下面是一 ...

  6. html表格与CSS控制表格样式

    表格是HTML网页中的重要标签,利用表格可以对网页进行排版,使网页信息有条理地显示出来. 这就是一个表格 ,清清楚楚的列出了英雄们的排名. 思维导图 <table>标签 用<tabl ...

  7. css表格排序,纯CSS实现表格排序-利用CSS 变量和Flexbox

    1.引子 今天闲逛知名前端资讯站Front-End Front,发现一个比较有意思的效果,给大家分享下,希望可以对大家有所启发. 纯CSS实现表格排序 心急的同学,先看效果,我放在codepen上. ...

  8. 纯css控制文字显示隐藏

    纯css控制文字显示隐藏 用到css 伪类 :checked :checked 选择器匹配每个已被选中的 input 元素(只用于单选按钮和复选框). html <div class=" ...

  9. CSS实现表格表头（thead）固定，内容（tbody）滚动

    前言 最近在写一个项目,然后要实现表头固定,tbody内容滚动的效果,该项目中没有使用任何插件,并且表格列数蛮多的,刚开始实现起来遇到各种问题,感觉蛮复杂的,后来找到了一种利用transform的方法 ...

  10. html ＜table＞ 表格 表头固定 内容滚动 代码拿去就能用

    纯 html.css代码写的 table 表格 先来看下pc端的效果图 移动端的效果图,前面两张是静态图,第三张是gif动态图 (像素失真了 •︿• ) 公司的移动端项目,用的是react,页面需求是 ...

最新文章

  1. ICLR2021 | 清华大学黄高团队：显存不够？不妨抛弃端到端训练
  2. 【计算机网络】网络层 : IPv4 地址 ( IP 地址分类 | 特殊 IP 地址 | 私有 IP 地址 | A 类、B 类、C 类 IP 地址网络号主机号数量 )★
  3. 文件操作-使用readline分行读取大文件
  4. matlab两个图共用一个x轴_SCI论文写作MATLAB出图(2)
  5. 笨办法学linux dhcp,了解网关、DNS、子网掩码、MAC地址、DHCP
  6. python能做哪些客户端_发布一个Httpsqs的Python客户端
  7. 交流充电桩电路图_直流充电桩和交流充电桩给电动汽车充电过程中是如何工作的？...
  8. JavaScript学习笔记：数组reduce()和reduceRight()方法
  9. Java 复习笔记 线程Thread
  10. 总结30个CSS3选择器（转载）
  11. Go中的切片Slice
  12. 树莓派红外避障小车python_制作树莓派wifi遥控和自动避障小车
  13. jquery prop(“outerHTML“) 获取当前标签和标签内部的html 代码
  14. 计算机网络课后作业习题1
  15. 太阳能光伏发电系统的组成
  16. 【Code】8位编程语言的创始人，你知道几位？
  17. Pearson相关系数, Spearman相关系数,Kendall相关系数的区别
  18. Mini MP3 Player播放器简介与STC12例程
  19. 三地五中心（ldc(逻辑数据中心）单元化）和容灾
  20. JAVA 实现图片原比例无损压缩

热门文章

  1. 2.1.PHP7.1 狐教程-【PHP基础】
  2. Oracle 基本函数-数值、字符、 Instr()、日期、转换、SQL 操作符、trunc 截断
  3. Spring Boot 集成 Thymeleaf 快速入门、静态资源映射规则、WebJars
  4. 微信支付金额为0.01分报错，和少一分钱的解决办法
  5. 阶段5 3.微服务项目【学成在线】_day01 搭建环境 CMS服务端开发_06-CMS需求分析-静态门户工程搭建...
  6. 阶段3 1.Mybatis_12.Mybatis注解开发_3 mybatis注解开发保存和更新功能
  7. MongoDb学习（四）--Repository
  8. Python 线程 进程 协程
  9. HTTP协议中GET、POST和HEAD的介绍
  10. 从远程库克隆（转载）