博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
table表格,让thead固定,tbody有滚动条,关键是都对齐的纯css写法。
阅读量:7087 次
发布时间:2019-06-28

本文共 1594 字,大约阅读时间需要 5 分钟。

找了好久才找到一篇可以简单粗暴就能用的,所以拿过来算是收藏了。里面有一个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>

转载于:https://www.cnblogs.com/webSong/p/6242444.html

你可能感兴趣的文章
使用storyboard实现页面跳转,简单的数据传递
查看>>
有些事明显对自己有益,为什么却无法去做?
查看>>
IOS开发基础知识--碎片30
查看>>
C语言编程规范—命名规则
查看>>
批处理-剪切文件夹到指定目录
查看>>
java POi excel 写入大批量数据
查看>>
关于子类对象的构造函数和父类构造函数的执行顺序
查看>>
.NET Core Web 应用部署到 Docker 中运行
查看>>
Saltstack-API(十二)
查看>>
Asp.net Boilerplate源码中NotNullAttribute的用处
查看>>
javascript继承
查看>>
待处理
查看>>
linux下在root用户登陆状态下,以指定用户运行脚本程序实现方式
查看>>
FB面经Prepare: Merge K sorted Array
查看>>
模拟链表
查看>>
C#中使用SendMessage在进程间传递数据的实例
查看>>
ADT Android Development Tools
查看>>
OpenGL ES 简单教程
查看>>
nvidia显卡驱动卸载和卸载后的问题
查看>>
Java集合源码分析(二)Linkedlist
查看>>