css固定表格表头(各浏览器通用)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title> 固定表格表头 </title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<meta http-equiv="X-UA-Compatible" content="IE=7" />
<meta name="Generator" content="EditPlus">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<style type="text/css">
div{
overflow-y: scroll;
overflow-x: hidden;
height: 100px;
margin-top: 5px;
margin-left: 12px;
padding-top: -2px;
padding-bottom: 5px;
border: 3px solid #009933;
}
table{
width: 100%;
border-color: #d2f1ac;
border-collapse: collapse;
border-top: 0px solid #ffffff;
}
.fixedtd{
position: relative;
z-index: 1;
background: #009933;
text-align: center;
}
#text{position:fixed;background-color:#00ff00 ;width: 100%; }
*+html #text {background-color:red;position:relative;top:expression(this.offsetParent.scrollTop);}
</style>
</head>
<body>
<div>
<table border="1">
<tr id="text">
<td class="fixedtd">
固定表头第一列
</td>
<td class="fixedtd">
固定表头第二列
</td>
<td class="fixedtd">
固定表头第三列
</td>
<td class="fixedtd">
固定表头第四列
</td>
<td class="fixedtd">
固定表头第五列
</td>
<td class="fixedtd">
固定表头第六列
</td>
</tr>
<tr>
<td> </td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</tr>
<tr>
<td>A1</td>
<td>A2</td>
<td>A3</td>
<td>A4</td>
<td>A5</td>
<td>A6</td>
</tr>
<tr>
<td>B1</td>
<td>B2</td>
<td>B3</td>
<td>B4</td>
<td>B5</td>
<td>B6</td>
</tr>
<tr>
<td>C1</td>
<td>C2</td>
<td>C3</td>
<td>C4</td>
<td>C5</td>
<td>C6</td>
</tr>
<tr>
<td>D1</td>
<td>D2</td>
<td>D3</td>
<td>D4</td>
<td>D5</td>
<td>D6</td>
</tr>
<tr>
<td>E1</td>
<td>E2</td>
<td>E3</td>
<td>E4</td>
<td>E5</td>
<td>E6</td>
</tr>
<tr>
<td>F1</td>
<td>F2</td>
<td>F3</td>
<td>F4</td>
<td>F5</td>
<td>F6</td>
</tr>
<tr>
<td>G1</td>
<td>G2</td>
<td>G3</td>
<td>G4</td>
<td>G5</td>
<td>G6</td>
</tr>
<tr>
<td>H1</td>
<td>H2</td>
<td>H3</td>
<td>H4</td>
<td>H5</td>
<td>H6</td>
</tr>
</table>
</div>
</body>
</html>
转载于:https://www.cnblogs.com/cczhoufeng/p/3727020.html
css固定表格表头(各浏览器通用)相关推荐
- html css 表头,css固定表格表头(各浏览器通用)
固定表格表头 div{ overflow-y: scroll; overflow-x: hidden; height: 100px; margin-top: 5px; margin-left: 12p ...
- 纯html+css固定表格一列或多列，其余进行横向滚动的方法-鹏仔先生
纯html+css固定表格一列或多列,其余进行横向滚动的方法 工作时候,遇到一个需求,表格的前两列固定不动,其他的跟随滚动条滚动,并没有在意,想起来很简单,刚开始想法是前两列absolute定位,后面 ...
- html表格的列并列,纯html+css固定表格一列或多列，其余进行横向滚动的方法-鹏仔先生...
纯html+css固定表格一列或多列,其余进行横向滚动的方法 工作时候,遇到一个需求,表格的前两列固定不动,其他的跟随滚动条滚动,并没有在意,想起来很简单,刚开始想法是前两列absolute定位,后面 ...
- CSS实现表格表头（thead）固定，内容（tbody）滚动
前言 最近在写一个项目,然后要实现表头固定,tbody内容滚动的效果,该项目中没有使用任何插件,并且表格列数蛮多的,刚开始实现起来遇到各种问题,感觉蛮复杂的,后来找到了一种利用transform的方法 ...
- css方法实现表格表头固定，横向纵向可滑动
介绍一种用css实现表格表头固定,横向纵向可滑动的方法 先用一个div把表格包起来,表格给定高宽,overflow:scroll. 然后给表头写一个黏性布局 position: sticky:top: ...
- ajax提交的表格怎么增加样式,20 个精美的Ajax + CSS 的表格效果_jquery
20 个功能强大,外观漂亮的基于Ajax + css 的表格效果,你可以从这些示例中学习怎么使用这些表格提供的排序和过滤的功能来组织表格中的数据. 现在让我们来看看这些表格: #1. Tableclo ...
- 完美解决html表格表头固定存在的问题
完美解决html表格表头固定存在的问题 当表格数据较多出现滚动条时,很多地方都有固定表头的需求.在网上查找资料,发现了一个比较简洁的方法. 代码如下: 1.css样式: th{backgroun ...
- bootstrap 表格表头固定
效果 效果是在pc端和移动端能够使表格的表头固定,并且在顶部,支持缩放时布局不乱. 核心技术 利用css的position:fixed 属性来脱离文档流,达到表头固定的效果. 代码 说明都在代码里面, ...
- css 查看更多_CSS粘性定位固定表格thead部分元素小方法
我们都知道CSS position属性用于指定一个元素在文档中的定位方式.top,right,bottom 和 left 属性则决定了该元素的最终位置.任务一种布局都可以通过N多种方式将其设定,今天看 ...
最新文章
- 字体大小的设置_老年人用智能手机，怎样更改字体大小？3种方法，手把手教您学会...
- 北科大matlab,北科大matlab第五次作业多项式及其相关计算.doc
- 光端机的作用是什么？ 简述光端机的作用
- 美国计算机科学专业申请要求,美国计算机科学专业申请条件
- feign直接走熔断_SpringCloud微服务(03)：Hystrix组件，实现服务熔断
- WINDOWS蓝色当机画面解读
- 笨鸟都没有先飞怎么办。。。
- 手把手教你强化学习 (九) 强化学习中策略梯度算法
- node-js由浅入深教程
- 改变浏览器窗口的大小和位置
- 和利时DCS系统设服务器,和利时DCS系统全套资料.pdf
- php程序员 合川_重庆PHP程序员工资如何？
- 【京东】会员激励体系，会员体系结构分析
- 阿尔兹海默症AD最新研究进展（2021年7月）
- python三维曲面合并_绘制多面体的三维曲面
- Streamline(流线)，Pathline(迹线)，Streakline(脉线) and Timeline(时间线)
- 【日语学习】日语 N2 词汇核心动词 200 个
- cshop是什么开发语言_学会了 C 语言真的可以开发出很多东西吗？
- android 自适应图片轮播,Android使用Recyclerview实现图片轮播效果的方法
- 解决【VS/VC】中文乱码问题-5种解决办法