table表格，让thead固定，tbody有滚动条，关键是都对齐的纯css写法。
找了好久才找到一篇可以简单粗暴就能用的，所以拿过来算是收藏了。里面有一个css2里的命令是我没用过的也是这里面关键的：table-layout:fixed;
原理很简单，有爱研究的童鞋可以去css官网看看说明文档。
直接贴代码：
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>转载自·威易网CSS教程</title>
<style>
table tbody {
display:block;
height:195px;
overflow-y:scroll;
}
table thead, tbody tr {
display:table;
width:100%;
table-layout:fixed;
}
table thead {
width: calc( 100% - 1em )
}
table thead th{ background:#ccc;}
</style>
</head>
<body>
<table width="80%" border="1">
<thead>
<tr>
<th>姓名</th>
<th>年龄</th>
<th>出生年月</th>
<th>手机号码</th>
<th>单位</th>
</tr>
</thead>
<tbody>
<tr>
<td>张三</td>
<td>18</td>
<td>1990-9-9</td>
<td>13682299090</td>
<td>阿里巴巴</td>
</tr>
<tr>
<td>张三封</td>
<td>18</td>
<td>1990-9-9</td>
<td>13682299090</td>
<td>阿里巴巴与四十大盗</td>
</tr>
<tr>
<td>张小三</td>
<td>18</td>
<td>1990-9-9</td>
<td>13682299090</td>
<td>腾讯科技</td>
</tr>
<tr>
<td>张三</td>
<td>18</td>
<td>1990-9-9</td>
<td>13682299090</td>
<td>浏阳河就业</td>
</tr>
<tr>
<td>张三疯子</td>
<td>18</td>
<td>1990-9-9</td>
<td>13682299090</td>
<td>阿里巴巴</td>
</tr>
<tr>
<td>张三</td>
<td>18</td>
<td>1990-9-9</td>
<td>13682299090</td>
<td>阿里巴巴</td>
</tr>
<tr>
<td>张大三</td>
<td>18</td>
<td>1990-9-9</td>
<td>13682299090</td>
<td>阿里巴巴</td>
</tr>
<tr>
<td>张三五</td>
<td>18</td>
<td>1990-9-9</td>
<td>13682299090</td>
<td>阿里巴巴</td>
</tr>
<tr>
<td>张刘三</td>
<td>18</td>
<td>1990-9-9</td>
<td>13682299090</td>
<td>阿里巴巴</td>
</tr>
<tr>
<td>张三</td>
<td>18</td>
<td>1990-9-9</td>
<td>13682299090</td>
<td>阿里巴巴</td>
</tr>
</tbody>
</table>
</body>
</html>
table表格，让thead固定，tbody有滚动条，关键是都对齐的纯css写法。的更多相关文章
- 纯CSS,table的thead固定,tbody显示滚动条
以下代码,仅在谷歌下测试过 首先是html的table的代码: <table class="tablediv" id="myTable" border=& ...
- table标签中thead、tbody、tfoot的作用
为了让大表格(table)在下载的时候可以分段的显示,就是说在浏览器解析HTML时,table是作为一个整体解释的,使用tbody可以优化显示.如果表格很长,用tbody分段,可以一部分一部分地显示, ...
- 关于boostrap的thead固定tbody滚动
原文地址:http://blog.csdn.net/bbsyi/article/details/51126041# 1 <!DOCTYPE html> 2 <html> 3 & ...
- table左边固定-底部横向滚动条
是日有需求,曾探讨过table表单头部.尾部固定不动,中间内容随着滚动条的滚动而变化. 整合资料之际,发现有很多表格,表单展现中,横向数据很多.很长,不方便查看. 则,横空霹雳出了,此款:table表 ...
- Bootstrap表格中，thead固定，tbody有垂直滚动条
1.html源码:这里的table是使用的vue写法,实际生成的表格和一个一个写的tr th td无异 <div class="panel-body no-padding"& ...
- table表格中实现tbody部分可滚动，且thead部分固定
1.想要实现表格的thead部分固定切tbody部分可滚动,就需要将thead与tbody进行分离,具体做法是 1.设置thead,tbody都为display:block: 2.设置th与td的宽度 ...
- html-3,table 表格标签 tr th td caption thead tbody tfoot 的简单使用
<!-- table border='1' style="border-collapse:collapse;" border 表格的像素宽度 border-collapse: ...
- table 的thead th 固定 tbody滚动例子
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" ...
- 纯css实现table表格固定列和表头,中间横向滚动的思路-附案例
最近做的后台管理系统要处理大量的表格 原项目是采用的for循环加拼接字符串的方式实现;导致js代码一大堆;各种单引号和双引号的嵌套;让人头疼;遂引入vue.js;用v-for做模板渲染;工作量顿时减轻 ...
随机推荐
- android 生命周期
引入android生命周期概念来做前端的hash切换页面的思路: 1. page manager来管理多个page(一对多的关系); 2. route:URL <-> Page; 3. P ...
- Redis性能测试
Redis 性能测试 Redis 性能测试是通过同时执行多个命令实现的.Redis性能测试主要是通过src文件夹下的redis-benchmark来实现(Linux系统下) 语法 redis 性能测试 ...
- idea使用心得(3)-重构初探
上一篇idea心得中,介绍了快捷键的用法.其中提及了重构神器Alt+Ctrl+Shift+T , 当时只是稍稍提及,本文重点在idea提供的重构选项.后续会有<重构,改善既有代码的设计>的 ...
- MySql常用日期函数(转载)
/*date_add(date,interval expr type)和date_sub(date,interval expr type)执行日期运算. date 是一个 datetime 或date ...
- PHP发送和接收POST数据
1. 发送post数据 $data = '{ "id": "17999030", "method": "sayHello" ...
- centos7系统管理和运维实战
centos7系统管理和运维实战 centos7安装配置 yum install -y net-tools >/etc/hostname echo "sqlserver01" ...
- Android四大核心组件之ContentProvider
实验内容 学习ContextProvider用法 编码实现简单ContextProvider功能 实验要求 通过简单代码了解ContextProvider功能和用法 实验步骤 ContextProvi ...
- Altium Designer 常用的快捷键
ctrl+r 复制并重复黏贴 ctrl+shift+v 只能黏贴 shift+c 取消选择 sp ...
- leetcode Super Pow
题目描述: superPow(int a, int[] b),b是一个int数组,每个元素都是正的个位数,组合起来表示一个正整数,例如b=[1,2,3]表示123,求解a^b mod 1337. 思路 ...
- C/C++ 结构体 数组 简单输入输出
#include <stdio.h> #include <stdlib.h> struct student{ int num; ]; double dec; }; int ma ...