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. java相关书籍及网站

    原文链接:http://developer.51cto.com/art/201408/448609.htm 对于 Java™ 语言开发人员来说,信息过量是一个真正的问题.每个新入行的程序员都要面临一个 ...

  2. JunOS SRX firewal Web authentication(转)

    转载自:https://srxasa.wordpress.com/2011/12/11/junos-srx-firewal-web-authentication/ JunOS SRX firewal ...

  3. ZJNU 2201 - 挖矿谷物语

    在dfs过程中加上栈记录当次dfs走过的路径 如果当次dfs到了一个之前的dfs已经经过的点 又因为只对没有访问过的点开始dfs 所以这种情况就说明接下来不可能返回到当次dfs开始的点 将栈内元素取出 ...

  4. Linux 安装python3.x步骤

    本文转发自博客园非真的文章,内容略有改动 本文已收录至博客专栏linux安装各种软件及配置环境教程中 linux系统本身默认安装有2.x版本的python,版本x根据不同版本系统有所不同,通过pyth ...

  5. HTML5之FileReader小结

    方法: 方法名 参数 描述 abort none 中断读取 readAsBinaryString file 将文件读取为二进制码 readAsDataURL file 将文件读取为 DataURL r ...

  6. windows下使用vs code调试简单的C程序

    常使用visual studio code(vs code)打开.c文件,如果让vs code具备调试技能估计会比较有用 准备工作: 1. vs code安装插件:cpptools 2. window ...

  7. LeetCode——735.行星碰撞

    给定一个整数数组 asteroids,表示在同一行的行星. 对于数组中的每一个元素,其绝对值表示行星的大小,正负表示行星的移动方向(正表示向右移动,负表示向左移动).每一颗行星以相同的速度移动. 找出 ...

  8. 嵌入式开发为什么选择C语言作为开发语言？

    了解嵌入式开发的朋友们都非常的清楚其核心的开发语言为C语言,C语言在嵌入式开发的过程中占有十分重要的地位,可以说两者之间“你中有我,我中有你”.但是有很多人会想,有那么多的开发语言为什么会单单的选择C ...

  9. tesseract系列（1） -- tesseract用vs编译成库

    1.下载teseract 下载地址github:     https://github.com/tesseract-ocr/tesseract/releases/ 2.编译源码 源码的编译有两种方式 ...

  10. Escape from the Hell

    Escape from the Hell [JAG Asia 2016] 容易证明优先选择差值大的更优 对于最后一瓶我们可以枚举 枚举最后一瓶,然后在树状数组上消去它的影响,然后线段树check是否出 ...