整合营销服务商
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
CSS table表格 thead固定 tbody滚动效果
由于项目需要，在表格中，当数据量越来越多时，就会出现滚动条，而在滚动的过程中，默认情况下表格头部会跟着表格内容一起滚动，导致看不到头部对应的字段名，影响体验效果！
实现思路：
将内容要滚动的区域控制在 tbody 标签中添加 overflow-y: auto; 样式，给 tr 标签添加 table-layout:fixed; (这是核心)样式，由于 tbody 有了滚动条后，滚动条也要占位，又会导致 tbody 和 thead 不对齐，所以在设置 tbody 的宽度时要把滚动条的宽度也加上【如果不想显示滚动条的话，可以把滚动条的宽度设置为0px，滚动条就没有了。
下面是效果图，具体完整实例代码也在下面：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>纯CSS table表格 thead固定 tbody滚动</title>
<style>
.table-box {
margin: 100px auto;
width: 1024px;
}
/* 滚动条宽度 */
::-webkit-scrollbar {
width: 8px;
background-color: transparent;
}
/* 滚动条颜色 */
::-webkit-scrollbar-thumb {
background-color: #27314d;
}
table {
width: 100%;
border-spacing: 0px;
border-collapse: collapse;
}
table caption{
font-weight: bold;
font-size: 24px;
line-height: 50px;
}
table th, table td {
height: 50px;
text-align: center;
border: 1px solid gray;
}
table thead {
color: white;
background-color: #38F;
}
table tbody {
display: block;
width: calc(100% + 8px); /*这里的8px是滚动条的宽度*/
height: 300px;
overflow-y: auto;
-webkit-overflow-scrolling: touch;
}
table tfoot {
background-color: #71ea71;
}
table thead tr, table tbody tr, table tfoot tr {
box-sizing: border-box;
table-layout: fixed;
display: table;
width: 100%;
}
table tbody tr:nth-of-type(odd) {
background: #EEE;
}
table tbody tr:nth-of-type(even) {
background: #FFF;
}
table tbody tr td{
border-bottom: none;
}
</style>
</head>
<body>
<section class="table-box">
<table cellpadding="0" cellspacing="0">
<caption>纯CSS table表格 thead固定 tbody滚动</caption>
<thead>
<tr>
<th>序 号</th>
<th>姓 名</th>
<th>年 龄</th>
<th>性 别</th>
<th>手 机</th>
</tr>
</thead>
<tbody>
<tr>
<td>001</td>
<td>Name</td>
<td>28</td>
<td>女</td>
<td>Mobile</td>
</tr>
<tr>
<td>002</td>
<td>Name</td>
<td>28</td>
<td>男</td>
<td>Mobile</td>
</tr>
<tr>
<td>003</td>
<td>Name</td>
<td>28</td>
<td>女</td>
<td>Mobile</td>
</tr>
<tr>
<td>004</td>
<td>Name</td>
<td>28</td>
<td>男</td>
<td>Mobile</td>
</tr>
<tr>
<td>005</td>
<td>Name</td>
<td>28</td>
<td>女</td>
<td>Mobile</td>
</tr>
<tr>
<td>006</td>
<td>Name</td>
<td>28</td>
<td>男</td>
<td>Mobile</td>
</tr>
<tr>
<td>007</td>
<td>Name</td>
<td>28</td>
<td>女</td>
<td>Mobile</td>
</tr>
<tr>
<td>008</td>
<td>Name</td>
<td>28</td>
<td>男</td>
<td>Mobile</td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="5">【table，thead，tbody，tfoot】 colspan：合并行， rowspan：合并列 </td>
</tr>
</tfoot>
</table>
</section>
</body>
</html>我自己是一名从事了多年开发的web前端老程序员，目前辞职在做自己的web前端私人定制课程，今年年初我花了一个月整理了一份最适合2019年学习的web前端学习干货，各种框架都有整理，送给每一位前端小伙伴，想要获取的可以关注我的头条号并在后台私信我：前端，即可免费获取。
原文链接：https://blog.csdn.net/muguli2008/article/details/103787152
格标签：
table 表格标签
熟悉表格常用的单词：
border 边距，align 格式 ：‘ center’ 对齐，cellspacing 单元格与单元格的距离，cellpadding 单元格与内容的距离，wedth 宽度，height 高度，tr 表示：行，th 表示：表头，td ：表示列
编辑表格：
生成表格：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>表格标签</title>
</head>
<body>
<table border="" cellspacing="" cellpadding="">
<tr>
<th>姓名</th>
<th>性别</th>
<th>年龄</th>
</tr>
<tr>
<td>张三</td>
<td>男</td>
<td>18</td>
</tr>
<tr>
<td>李四</td>
<td>男</td>
<td>19</td>
</tr>
<tr>
<td>王五</td>
<td>男</td>
<td>20</td>
</tr>
</table>
</table>
</body>
</html>
全栈攻城狮-每日更新原创IT编程技术及日常实用视频。
主要内容：这是HTML课程的第六课，在这节课程中主要讲解一下HTML中body的属性，以及表格元素。希望大家根据这个教程可以学习一下。
上节回顾
在上节中主要讲解了超链接和图片的知识点。上节请戳->网页前端开发基础教程05-网页中插入图片和超链接，界面更绚丽
当然讲解的并不是很全面，只是把常用的HTML属性进行讲解了出来，在后期会进行做项目，到时候，直接回顾一下，马上就能搞懂了。这次直接讲解一下HTML中的body属性以及表格元素。
PS：其实HTML这个东西很简单，只需要根据对应的元素，学会标签指的是什么就可以了，就和谍战片中中的密码本一样，按照密码本书写对应的格式，写上去就能直接显示了。只是学会这种标签的样式而已。自己学习HTML也是可以的。最重要的还是进行实践。
body的属性
body是整个页面的主体元素，我们把内容写入到body元素中，那应该如何设置主体的背景颜色、背景图片呢？
下面就一一来讲解一下。使用Sublime创建一个HTML文件。
设置背景颜色，属性为bgcolor，值为RGB颜色或者颜色的英文单词。
2.背景图片设置，背景图片照样可以用路径的方式写入到HTML文件中。属性为background例如：
当然body的属性值，比较少，而且几乎不太用，在以后的时候要使用CSS代替这些东西。
表格
表格在网页中还是很常用的，比如在按照每行数据进行展示的时候，就需要用到表格啦。所以就需要学习一下表格应该如何写。
OK，我们先建立一个最简单的学生信息表：
其中table（表格）、tr（一行）、（一个单元格）。这三个时表格最基本的元素。并依次有个上下级嵌套的关系。
表格中的属性
表格中有很多属性，正是因为有了这些属性，才让表格无比强大。比如在老早的时候，风靡一时的Hao123就是使用表格进行制作的。OK在下节中咱们也会自己制作一个模仿的Hao123第一版，通过table制作。
border
border是边框的意思，在以后的学习中你肯定会对这个单词不陌生，因为这个单词真的是太常用了。border有两个值分别为0和1.0表示“没有边框”，1表示“有边框”。
cellpadding:
这个表示的是表格的内边距，也就是表格的边框到里面的内容的距离。
数值越大，单元格的表框到内容的距离越大。
cellspacing
这是单元格和单元格之间的距离，这个值越大，单元格之间的距离越大。
align：
align表示的是单元格的对齐方式，对里面的内容进行水平的对齐，其值有三个分别为right（右）、center（居中）、left（左）。
colspan、rowspan：
这是两个属性，分别表示行的合并和列的合并。其值为数字，表示要合并的单元格：
还有其他几个属性例如：valign、bgcolor、width、height等在前课程中也讲过了。
每天一个知识点，带你迈向软件编程大神，一起努力吧。下节课程，我们一起做一个Hao123的导航页面。
*请认真填写需求信息，我们会在24小时内与您取得联系。
