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. 网页时不时打不开？试试阿里DNS 233.5.5.5 /233.6..6.6

    最经上网都是用手机热点,但发现用谷歌浏览器时,时不时打不开网页.最后发现是DNS的问题,原来我的dns是8.8.8.8. 最后更改成阿里的DNS 233.5.5.5 /233.6..6.6,打开网页流 ...

  2. epoll机制

    一.参考网址 1.epoll机制:epoll_create.epoll_ctl.epoll_wait.close 2.Linux网络编程 使用epoll实现一个高性能TCP Echo服务器 3.用C写 ...

  3. PAT Basic 1083 是否存在相等的差 (20) [hash映射，map STL]

    题目 给定 N 张卡⽚,正⾯分别写上 1.2.--.N,然后全部翻⾯,洗牌,在背⾯分别写上 1.2.--. N.将每张牌的正反两⾯数字相减(⼤减⼩),得到 N 个⾮负差值,其中是否存在相等的差? 输⼊ ...

  4. python3 文件流

    文件流 # python里的打开一个文件用open(),如果不能打开,会抛出异常:OSError # 文件流的基本参数 # . file: 打开一个文件 # . mode: 打开的模式,默认模式为tx ...

  5. Java中：>>>和>>区别

    >>>表示不带符号向右移动二进制数,移动后前面统统补0:两个箭头表示带符号移动, 没有<<<这种运算符,因为左移都是补零,没有正负数的区别. 如 -12 的二进制为 ...

  6. 剑指offer【13】- 链表中倒数第k个结点

    输入一个链表,输出该链表中倒数第k个结点. /* public class ListNode { int val; ListNode next = null; ListNode(int val) { ...

  7. ESLint javascript格式要求

    首行缩进2个空格 eslint: indent functionhello (name) { console.log('hi', name) } 字符串使用单引号(除了避免转义) eslint: qu ...

  8. collection-time-os-sys-json模块

    一.collections模块 美 [kə'lekʃənz] ,收集,收藏 在内置数据(dict  list  set  tuple)的基础上,collections模块海提供了几个常用的数据类型:c ...

  9. centos mysql无法删除数据库

    系统版本是CentOS Linux release 7.4.1708 (Core) 数据库版本mysql  Ver 14.14 Distrib 5.6.39 在执行drop database ga-s ...

  10. [USACO09MAR]Moon哞哞叫Moon Mooing（模拟）

    链接:https://ac.nowcoder.com/acm/contest/1086/F来源:牛客网 题目描述 A full moon casts some sort of spell on the ...