HTML table表头固定

说说我在最近项目中碰到的css问题吧，作为问题知识集合总结笔记：

<!DOCTYPE html>

<html>

	<head>

		<meta charset="UTF-8">

		<title></title>

		<style>

			table tbody {

            display: block;

            height: 200px;

            overflow-y: scroll;

        }

        table thead,

        table tbody tr {

            display: table;

            width: 100%;

            table-layout: fixed; /**表格列的宽度由表格宽度决定，不由内容决定*/

            text-align: center;

        }

        thead th,

        tbody td {

            width: 50px;

        }

        table thead {

            width: calc( 100% - 1em);/*表头与表格垂直对齐*/

        }

		</style>

	</head>

	<body>

	<div style="width: 800px;">

        <div class="table-head">

            <table align="center">

                <thead>

                    <tr>

                        <th>序号</th>

                        <th>内容</th>

                    </tr>

                </thead>

                <tbody>

                    <tr>

                        <td>1</td>

                        <td>我只是用来测试的</td>

                    </tr>

                    <tr>

                        <td>2</td>

                        <td>我只是用来测试的</td>

                    </tr>

                    <tr>

                        <td>3</td>

                        <td>我只是用来测试的</td>

                    </tr>

                    <tr>

                        <td>4</td>

                        <td>我只是用来测试的</td>

                    </tr>

                    <tr>

                        <td>5</td>

                        <td>我只是用来测试的</td>

                    </tr>

                    <tr>

                        <td>6</td>

                        <td>我只是用来测试的</td>

                    </tr>

                    <tr>

                        <td>7</td>

                        <td>我只是用来测试的</td>

                    </tr>

                    <tr>

                        <td>8</td>

                        <td>我只是用来测试的</td>

                    </tr>

                </tbody>

            </table>

        </div>

    </div>

</body>

</html>

　　顺便做做笔记说说px、em、rem的区别：

　　px是固定的像素，一旦设置了就无法因为适应页面大小而改变。

　　em和rem相对于px更具有灵活性，他们是相对长度单位，意思是长度不是定死了的，更适用于响应式布局。

　　对于em和rem的区别一句话概括：em相对于父元素大小，rem相对于根元素大小（html元素）。

　　rem中的r意思是root（根源），这也就不难理解了。

em/rem：用于做响应式页面，不过我更倾向于rem，因为em不同元素的参照物不一样（都是该元素父元素），所以在计算的时候不方便，相比之下rem就只有一个参照物（html元素），这样计算起来更清晰。

关于滚动条：

webkit支持拥有overflow属性的区域，列表框，下拉菜单，textarea的滚动条自定义样式，所以用处还是挺大的。当然，兼容所有浏览器的滚动条样式目前是不存在的。

css美化浏览器默认滚动条样式：

::-webkit-scrollbar {//滚动条的宽度

    width:9px;

    height:9px;

}

::-webkit-scrollbar-thumb {//滚动条的设置

    background-color:#dddddd;

    background-clip:padding-box; /*背景被裁剪到内边距框   content-box 背景裁剪到内容框*/

    min-height:28px;

}

::-webkit-scrollbar-thumb:hover {

    background-color:#bbb;

}

::-webkit-scrollbar-track-piece { //滚动条凹槽的颜色，还可以设置边框属性

    background-color:#f8f8f8;

}

　　给某个div加滚动条设置：

.test1::-webkit-scrollbar {

     width: 8px;

}

 .test1::-webkit-scrollbar-track {

     background-color:red;

     -webkit-border-radius: 2em;

     -moz-border-radius: 2em;

     border-radius:2em;

}

 .test1::-webkit-scrollbar-thumb {

     background-color:green;

     -webkit-border-radius: 2em;

     -moz-border-radius: 2em;

     border-radius:2em;

}

滚动条组成

  • ::-webkit-scrollbar 滚动条整体部分
  • ::-webkit-scrollbar-thumb  滚动条里的滑块，滚动条里面的小方块，能向上向下移动（或往左往右移动，取决于是垂直滚动条还是水平滚动条）
  • ::-webkit-scrollbar-track  滚动条的轨道（里面装有Thumb）
  • ::-webkit-scrollbar-button 滚动条的轨道的两端按钮，允许通过点击微调小方块的位置。
  • ::-webkit-scrollbar-track-piece 内层轨道，滚动条中间部分（除去）
  • ::-webkit-scrollbar-corner 边角，即两个滚动条的交汇处
  • ::-webkit-resizer 两个滚动条的交汇处上用于通过拖动调整元素大小的小控件

demo样例：

/*定义滚动条高宽及背景 高宽分别对应横竖滚动条的尺寸*/

::-webkit-scrollbar

{

	width: 16px;

	height: 16px;

	background-color: #F5F5F5;

}

/*定义滚动条轨道 内阴影+圆角*/

::-webkit-scrollbar-track

{

	-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);

	border-radius: 10px;

	background-color: #F5F5F5;

}

/*定义滑块 内阴影+圆角*/

::-webkit-scrollbar-thumb

{

	border-radius: 10px;

	-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);

	background-color: #555;

}

　　具体更多样例可以参照https://blog.csdn.net/hanshileiai/article/details/40398177

:horizontal

//horizontal伪类适用于任何水平方向上的滚动条

:vertical

//vertical伪类适用于任何垂直方向的滚动条

:decrement

//decrement伪类适用于按钮和轨道碎片。表示递减的按钮或轨道碎片，例如可以使区域向上或者向右移动的区域和按钮

:increment

//increment伪类适用于按钮和轨道碎片。表示递增的按钮或轨道碎片，例如可以使区域向下或者向左移动的区域和按钮

:start

//start伪类适用于按钮和轨道碎片。表示对象（按钮 轨道碎片）是否放在滑块的前面

:end

//end伪类适用于按钮和轨道碎片。表示对象（按钮 轨道碎片）是否放在滑块的后面

:double-button

//double-button伪类适用于按钮和轨道碎片。判断轨道结束的位置是否是一对按钮。也就是轨道碎片紧挨着一对在一起的按钮。

:single-button

//single-button伪类适用于按钮和轨道碎片。判断轨道结束的位置是否是一个按钮。也就是轨道碎片紧挨着一个单独的按钮。

:no-button

no-button伪类表示轨道结束的位置没有按钮。

:corner-present

//corner-present伪类表示滚动条的角落是否存在。

:window-inactive

//适用于所有滚动条，表示包含滚动条的区域，焦点不在该窗口的时候。

::-webkit-scrollbar-track-piece:start {

/*滚动条上半边或左半边*/

}

::-webkit-scrollbar-thumb:window-inactive {

/*当焦点不在当前区域滑块的状态*/

}

::-webkit-scrollbar-button:horizontal:decrement:hover {

/*当鼠标在水平滚动条下面的按钮上的状态*/

}

　　伪类与伪元素区别:

参照：https://www.cnblogs.com/ghost-xyx/p/3763669.html

HTML table表头固定的更多相关文章

  1. table表头固定问题

    table表头固定问题 原生的table表头在表格滚动时候无法固定,可以使用以下的方法进行模拟 1. 双table法 表头和表体各用一个table,这样会产生表格列对不齐的问题,可以使用colgrou ...

  2. 纯CSS实现table表头固定（自创备忘）

    因为之前约定时候产品没说要表头固定,这次迭代测试突然提出这个需求,而且不知道因为什么未知原因非要这样不可--因为之前用了table标签做表单,而且也没用插件,这下就难了点,找另外一个前端前辈妹子商量了 ...

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

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

  4. jQuery,Table表头固定插件chromatable存在的问题及解决办法

    在最近的项目中需要将表格的表头固定,搜寻了大量的资料,发现chromatable插件还是比较方便的.但是当我在一个页面中多次使用 chromatable固定对个表格的表头时问题就出现了,首先说明系统的 ...

  5. table表头固定

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/ ...

  6. table 表头固定

    <html> <head> <title>Test</title> <style type="text/css"> .d ...

  7. Html - Table 表头固定和 tbody 设置 height 在IE不起作用的解决

    原文地址,转载请注明出处:http://www.cnblogs.com/jying/p/6294063.html 做项目的时候发现给 tbody设置 height 和 overflow-y 在IE下不 ...

  8. html5 table的表头固定的HTML代码

    table的表头固定的HTML代码 <!DOCTYPE html> <html> <head lang="en"> <meta chars ...

  9. bootstrap table 实现固定悬浮table 表头并可以水平滚动

    在开发项目中,需要将表格头部固定,而且表格大多数情况下是会水平滚动的.项目的css框架是bootstrap 3,故也可以叫做bootstrap table. 需要实现的是:表格头部固定,并且支持水平滚 ...

随机推荐

  1. Django专题之ORM

    ORM介绍 ORM概念 对象关系映射(Object Relational Mapping,简称ORM)模式是一种为了解决面向对象与关系数据库存在的互不匹配的现象的技术. 简单的说,ORM是通过使用描述 ...

  2. Python模块——json

    简介 json全名是JavaScript Object Notation(即:Javascript对象标记).它是JavaScript的子集,JSON是轻量级的文本数据交换格式.前端和后端进行数据交互 ...

  3. mysql group_concat和find_in_set的使用

    原先sql获取角色对应的权限信息: select a.*, group_concat(b.auth_name) as auth_name from sh_role a left join sh_aut ...

  4. redis day03 下

    事务 能够有回退状态 事务命令 安命令执行没问题,redis是弱事务型 nulti incr n1   -->QUEUED(返回仅队列了) EXEC -->返回结果 pipeline 流水 ...

  5. 金蝶cloud成本核算流程

  6. Error: Invalid or corrupt jarfile SpringBootTemplate.jar

    当在尝试将SpringBoot打包成为Jar文件, 丢到linux服务器去运行的时候, 尝试在windows自带的CMD窗口命令行中运行jar文件的时候, 遇到了这样的问题. 错误的意思是: 无效 或 ...

  7. python学习——函数及其参数

    函数 函数是组织好的,可重复使用的,用来实现单一,或相关联功能的代码段.函数能提高应用的模块性,和代码的重复利用率.严格来说python只有函数,没有过程,人们理解的函数都是带有return的,而过程 ...

  8. LoadRunner 工具使用

    LoaderRunner 第一天 1.1 性能测试基础 ​ 服务器端性能测试 1.1 什么是性能测试的本质 基于协议模拟用户发出请求(业务的模拟), 对服务器形成一定的负载,来测试服务器的性能指标是否 ...

  9. 基于rtmp的移动端推流解决方案

    因工作需要,及考虑成本因素,需要探索一套免费的移动端基于rtmp推流的直播解决方案,过程虽稍显曲折,但最终还是完成了目标.在这里将记录下来,以便日后查阅. 总体思路 移动端推流(RTMP) ---&g ...

  10. Redis哨兵模式高可用部署和配置

    一.Redis 安装配置 1.下载redis安装包 wget http://download.redis.io/releases/redis-4.0.9.tar.gz 2.解压安装包 tar -zxv ...