css表格表头一起滚动,纯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宽度相同*/

}

OperateDateAcknowledgeOther1Other2Other3
OperateDateAcknowledgeOther1Other2Other3
OperateDateAcknowledgeOther21Other22Other3
OperateDateAcknowledgeOther31Other32Other3
OperateDateAcknowledgeOther41Other42Other3
Operate2011-12-12 12:22:34 9987AcknowledgeOther51Other52Other3hhhhhhhhhhhhhhhhhhhhhhhhaa

纯CSS实现table表头固定(自创备忘)

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

js控制固定div和随屏滚动div兼容多浏览器和纯css控制(来自网络)

n">

随机推荐

NoSQL数据库之国产开源产品:SequoiaDB 分析前言

随着互联网技术的发展,面对海量数据的存储和分析,传统关系型数据库已经无法满足,由此衍生出一种与关系型数据库区别开的数据库NoSQL(Not Only SQL). 国外做的比较成熟的NoSQL有Mong ...

DataTransfer(setData()方法)

DataTransfer对象专门用来存储拖放时要携带的数据,它可以被设置为拖放事件对象的DataTransfer属性.---把拖动的数据存入其中setData有两个参数:1.第一个参数为携带数据的数据 ...

1254 Flip and Shift

这题是目的是把黑球和白球分开连续放,事实上只要把其中一种颜色分好在一边就可以,可以绕一个球转即是第n个球可以放在n-2或者n+2上,因为这是个环,所以只需要把黑球或者白球连续放好就可以,当一共有奇数个 ...

linux基础(五)

一.linux网络原理及基础设置 ifconfig 命令:显示所有正在启动的网卡的详细信息或设定系统中网卡的IP地址. [root@bogon ~]# ifconfig ens33: flags=41 ...

Oarcle 入门之where关键字

--where 关键字 --作用:过滤行 *将需要的行用where引导出来 用法: 1.判断符号:=,!=,<>,,<=,>=,any,some,all; 例 ...

nodejs nodemailer 使用

index.js const nodemailer=require("nodemailer") let sendEmail=function () { var transporte ...

关于在Mac上安装模拟器的坑比~~~~~

没有人比我更坑了~~就安装一个简单的模拟器花了我一天时间~~我去~~~ 但是最后还是安装好了~~真的是活久见~~好吧~~ 废话不多说先上安装好的图~炫耀一下~ ~ ok!要实现这样的效果~你需要下载虚 ...

Lua中模块初识

定义了两个文件: Module.lua 和 main.lua 其中,模块的概念,使得Lua工程有了程序主入口的概念,其中main.lua就是用来充当程序主入口的. 工程截图如下: Module.lua ...

emWin教程目录汇总

目录 第一章: 当前主流的小型嵌入式 GUI 第2章 初学 emWin 的准备工作及其快速上手

  • 0
    点赞
  • 0
    评论
  • 0
    收藏
  • 一键三连
    一键三连
  • 扫一扫,分享海报

表情包
插入表情
评论将由博主筛选后显示,对所有人可见 | 还能输入1000个字符
©️2021 CSDN 皮肤主题: 深蓝海洋 设计师:CSDN官方博客 返回首页
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值