以下代码,仅在谷歌下测试过

首先是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显示滚动条的更多相关文章

  1. table表头thead固定

    <html> <head> <meta charset="utf-8"/> <script type="text/javascr ...

  2. 关于boostrap的thead固定tbody滚动

    原文地址:http://blog.csdn.net/bbsyi/article/details/51126041# 1 <!DOCTYPE html> 2 <html> 3 & ...

  3. 纯CSS手动滑动轮播图(隐藏滚动条)

    HTML: <div class="bigder"> <div class="big"> <dl> <dt>&l ...

  4. table中thead固定一直在最上面

    <link rel="shortcut icon" href="favicon.ico"> <link href="css/boot ...

  5. table 表头固定 thead固定. 1) 使用jquery.freezeheader.js

    方法一: 使用jquery.freezeheader.js 固定表头: 1-: 初始化: <!DOCTYPE html> <html lang="en"> ...

  6. table标签中thead、tbody、tfoot的作用

    为了让大表格(table)在下载的时候可以分段的显示,就是说在浏览器解析HTML时,table是作为一个整体解释的,使用tbody可以优化显示.如果表格很长,用tbody分段,可以一部分一部分地显示, ...

  7. table的thead,tbody,tfoot

    为了让大表格(table)在下载的时候可以分段的显示,就是说在浏览器解析HTML时,table是作为一个整体解释的,使用tbody可以优化显示. 如果表格很长,用tbody分段,可以一部分一部分地显示 ...

  8. Html标签中thead、tbody、tfoot的作用

    Html标签中thead.tbody.tfoot的作用 为了让大表格(table)在下载的时候可以分段的显示,就是说在浏览器解析HTML时,table是作为一个整体解释的,使用TBODY可以优化显示. ...

  9. 前端:table、thead、th、tr、td

    table:表格:thead:表头:tr:行:td:单元格:th:一行的首个单元格 tbody包含行的内容下载完优先显示,不必等待表格结束.另外,还需要注意一个地方.表格行本来是从上向下显示的.但是, ...

随机推荐

  1. Flutter——Row组件(水平布局组件)

    Row组件的常用属性 属性 说明 mainAxisAlignment 主轴的排序方式 crossAxisAlignment 次轴的排序方式 children 组件子元素 import 'package ...

  2. 3.Bacula Client安装配置

    1.   Bacula Client安装配置 1.1.   linux客户端安装 1.1.1.  安装依赖包 yum install libacl libacl-devel 1.1.2.  Clien ...

  3. Maven 依赖的作用域

    Maven的一个哲学是惯例优于配置(Convention Over Configuration), Maven默认的依赖配置项中,scope的默认值是compile,项目中经常傻傻的分不清,直接默认了 ...

  4. python基础:数据类型一

    一.可变不可变类型 二.数字类型 三.字符串类型 四.列表类型 一.可变不可变类型 #可变类型: 值变了,但是id没有变,证明没有生成新的值而是在改变原值,原值是可变类型 #不可变类型:值变了,id也 ...

  5. linux usb驱动记录(一)

    一.linux 下的usb驱动框架 在linux系统中,usb驱动可以从两个角度去观察,一个是主机侧,一个是设备侧.linux usb 驱动的总体框架如下图所示:   从主机侧看usb驱动可分为四层: ...

  6. Sublime text3安装

    一.Sublime text3下载 [20190506]下载 官网下载:https://www.sublimetext.com/ https://download.sublimetext.com/Su ...

  7. 【换根dp】9.22小偷

    换根都不会了 题目大意 给定一棵$n$个点的树和树上一撮关键点,求到所有$m$个关键点距离的最大值$dis_{max}\le LIM$的点的个数. $n,m\le 30000,LIM\le 30000 ...

  8. Java笔记(基础第三篇)

    面向对象的特点: 封装 继承 多态 类的构造方法 如果在类中定义的构造方法都不是无参的构造方法,则编译器不会为类设置一个默认的无参构造方法,当视图调用无参构造方法实例化一个对象时,编译器会报错,所以只 ...

  9. BZOJ 2002: [Hnoi2010]Bounce 弹飞绵羊 (LCT维护深度)

    要维护深度,就维护一下size就行了.access一下x,那么从根->x这一条链就独立成为一棵splay,那么splay的size节点数就是x的深度. 删边的时候直接access一下,splay ...

  10. javascript---查找节点

    快捷键: chazhaojiedian(查找节点)     chuangjianjiedian(创建节点) 使用childNodes childElementCount//=====以下是第一种操作D ...