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. Codeforce 370C Mittens 巧妙数学题

    这道题目我一开始想错了,觉得只要排好序,再从头到尾把可以相互交换的进行下交换就可以了...事实证明是错的.正确的解法比较巧妙,而且写法非常好,值得学习 首先,要注意的一个规律是,假如最大的颜色数字出现 ...

  2. Acunetix WVS安全测试软件使用教程（入门级）

    1.下载 Acunetix WVS 10.5软件,下载地址为:https://pan.baidu.com/s/1Koku0Lhya5PgphMVL7w19g 密码:v438 2.压缩包中有破解说明,按 ...

  3. 小白安装Android Studio

    原文 Android Studio 安装 步骤1 - 系统要求 可以在以下的操作系统开始 Android 应用程序开发: Microsoft® Windows® 8/7/Vista/2003 (32 ...

  4. 吴裕雄--天生自然 pythonTensorFlow自然语言处理：Attention模型--训练

    import tensorflow as tf # 1.参数设置. # 假设输入数据已经转换成了单词编号的格式. SRC_TRAIN_DATA = "F:\\TensorFlowGoogle ...

  5. c语言中对字段宽度的理解？

    /************************************************************************* > File Name: printf.c ...

  6. 【转】Fst指数

    [转]Fst指数 转载自 http://blog.csdn.net/zhu_si_tao/article/details/71513099 与 http://blog.sina.com.cn/s/bl ...

  7. Java中使用PrepateStatement并且like模糊查询

    在使用PreparedStatement进行模糊查询的时候废了一番周折,以前一直都没有注意这个问题.一般情况下我们进行精确查询,sql语句类似:select * from table where na ...

  8. 关于jQuery中toggle参数callback函数提前执行问题

    通过 jQuery,您可以使用 toggle() 方法来切换 hide() 和 show() 方法. 显示被隐藏的元素,并隐藏已显示的元素: $(selector).toggle(speed,call ...

  9. curl查看请求你响应时间

    [root@localhost ~]# curl -o /dev/null -s -w time_namelookup:%{time_namelookup}"\n"time_con ...

  10. demo4j解析xml

    1//先加入dom4j.jar包 2import java.util.HashMap; 3import java.util.Iterator; 4import java.util.Map; 5 6im ...