纯CSS,table的thead固定,tbody显示滚动条
以下代码,仅在谷歌下测试过
首先是html的table的代码:
<table class="tablediv" id="myTable" border="1">
<thead>
<tr>
<td class="wt40">111asdasdassd</td>
<td class="wt50">222asdsa</td>
</tr>
</thead>
<tbody id="tb">
<tr>
<td class="wt40">aaaaaaa23423d</td>
<td class="wt50">bbbbb23w23sd</td>
</tr>
<tr>
<td class="wt40">fdfffffffffffffsgdds</td>
<td class="wt50">bbbbbbb sd</td>
</tr>
<tr>
<td class="wt40">aaaaaaa sd</td>
<td class="wt50">bbbbbbb sd</td>
</tr>
<tr>
<td class="wt40">aaaaaaa sd</td>
<td class="wt50">bbbbbbb sd</td>
</tr>
<tr>
<td class="wt40">aaaaaaa sd</td>
<td class="wt50">bbbbbbb sd</td>
</tr>
<tr>
<td class="wt40">aaaaaaa sd</td>
<td class="wt50">bbbbbbb sd</td>
</tr>
<tr>
<td class="wt40">aaaaaaa sd</td>
<td class="wt50">bbbbbbb sd</td>
</tr>
<tr>
<td class="wt40">aaaaaaa sd</td>
<td class="wt50">bbbbbbb sd</td>
</tr>
<tr>
<td class="wt40">aaaaaaa sd</td>
<td class="wt50">bbbbbbb sd</td>
</tr>
<tr>
<td class="wt40">aaaaaaa sd</td>
<td class="wt50">bbbbbbb sd</td>
</tr>
<tr>
<td class="wt40">aaaaaaa sd</td>
<td class="wt50">bbbbbbb sd</td>
</tr>
</tbody>
</table>
下面是css代码,
table {
margin:0 auto;
border-collapse:collapse;
}
thead {
background:#CCCCCC;
display:block
}
tbody {
height:100px;
overflow-y:scroll;
display:block
}
.wt40{
width:300px;
}
.wt50{
width:450px;
}
浏览器窗口比table宽的时候显示的是正常的,但是浏览器的宽度缩小的时候会出现thead和tbody对不齐的情况,如下图
之后,修改css如下,
.wt40{
width:300px;
min-width:300px;
max-width:300px;
}
.wt50{
width:450px;
min-width:450px;
max-width:450px;
}
分别加上min-width和max-width之后,这个问题解决了。但是还有一个问题,那就是给table加上宽度(宽度大于tbody的)之后,滚动条就会右移,如图:
所以只要把table的width设置的比tbody就好了。
纯CSS,table的thead固定,tbody显示滚动条的更多相关文章
- table表头thead固定
<html> <head> <meta charset="utf-8"/> <script type="text/javascr ...
- 关于boostrap的thead固定tbody滚动
原文地址:http://blog.csdn.net/bbsyi/article/details/51126041# 1 <!DOCTYPE html> 2 <html> 3 & ...
- 纯CSS手动滑动轮播图(隐藏滚动条)
HTML: <div class="bigder"> <div class="big"> <dl> <dt>&l ...
- table中thead固定一直在最上面
<link rel="shortcut icon" href="favicon.ico"> <link href="css/boot ...
- table 表头固定 thead固定. 1) 使用jquery.freezeheader.js
方法一: 使用jquery.freezeheader.js 固定表头: 1-: 初始化: <!DOCTYPE html> <html lang="en"> ...
- table标签中thead、tbody、tfoot的作用
为了让大表格(table)在下载的时候可以分段的显示,就是说在浏览器解析HTML时,table是作为一个整体解释的,使用tbody可以优化显示.如果表格很长,用tbody分段,可以一部分一部分地显示, ...
- table的thead,tbody,tfoot
为了让大表格(table)在下载的时候可以分段的显示,就是说在浏览器解析HTML时,table是作为一个整体解释的,使用tbody可以优化显示. 如果表格很长,用tbody分段,可以一部分一部分地显示 ...
- Html标签中thead、tbody、tfoot的作用
Html标签中thead.tbody.tfoot的作用 为了让大表格(table)在下载的时候可以分段的显示,就是说在浏览器解析HTML时,table是作为一个整体解释的,使用TBODY可以优化显示. ...
- 前端:table、thead、th、tr、td
table:表格:thead:表头:tr:行:td:单元格:th:一行的首个单元格 tbody包含行的内容下载完优先显示,不必等待表格结束.另外,还需要注意一个地方.表格行本来是从上向下显示的.但是, ...
随机推荐
- Flutter——Row组件(水平布局组件)
Row组件的常用属性 属性 说明 mainAxisAlignment 主轴的排序方式 crossAxisAlignment 次轴的排序方式 children 组件子元素 import 'package ...
- 3.Bacula Client安装配置
1. Bacula Client安装配置 1.1. linux客户端安装 1.1.1. 安装依赖包 yum install libacl libacl-devel 1.1.2. Clien ...
- Maven 依赖的作用域
Maven的一个哲学是惯例优于配置(Convention Over Configuration), Maven默认的依赖配置项中,scope的默认值是compile,项目中经常傻傻的分不清,直接默认了 ...
- python基础:数据类型一
一.可变不可变类型 二.数字类型 三.字符串类型 四.列表类型 一.可变不可变类型 #可变类型: 值变了,但是id没有变,证明没有生成新的值而是在改变原值,原值是可变类型 #不可变类型:值变了,id也 ...
- linux usb驱动记录(一)
一.linux 下的usb驱动框架 在linux系统中,usb驱动可以从两个角度去观察,一个是主机侧,一个是设备侧.linux usb 驱动的总体框架如下图所示: 从主机侧看usb驱动可分为四层: ...
- Sublime text3安装
一.Sublime text3下载 [20190506]下载 官网下载:https://www.sublimetext.com/ https://download.sublimetext.com/Su ...
- 【换根dp】9.22小偷
换根都不会了 题目大意 给定一棵$n$个点的树和树上一撮关键点,求到所有$m$个关键点距离的最大值$dis_{max}\le LIM$的点的个数. $n,m\le 30000,LIM\le 30000 ...
- Java笔记(基础第三篇)
面向对象的特点: 封装 继承 多态 类的构造方法 如果在类中定义的构造方法都不是无参的构造方法,则编译器不会为类设置一个默认的无参构造方法,当视图调用无参构造方法实例化一个对象时,编译器会报错,所以只 ...
- BZOJ 2002: [Hnoi2010]Bounce 弹飞绵羊 (LCT维护深度)
要维护深度,就维护一下size就行了.access一下x,那么从根->x这一条链就独立成为一棵splay,那么splay的size节点数就是x的深度. 删边的时候直接access一下,splay ...
- javascript---查找节点
快捷键: chazhaojiedian(查找节点) chuangjianjiedian(创建节点) 使用childNodes childElementCount//=====以下是第一种操作D ...