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. NodeJS框架一览

    NodeJS 框架一览 Express 当你使用Node.js构建web应用程序时, Express通常被视为事实上的Web服务器.它的哲学(一个可以使用中间件包扩展的简约核心)是大多数Node.js ...

  2. RedHat6.5升级内核

    redhat6.5 升级内核 1.导入key rpm --import https://www.elrepo.org/RPM-GPG-KEY-elrepo.org 2.安装elrepo的yum源 rp ...

  3. 15）png图片旋转贴图

    1)基本代码展示  还是上一个那个总代码: #include<Windows.h> #include<gdiplus.h>//GDI+的头文件 using namespace ...

  4. 吴裕雄--天生自然 PHP开发学习：表单 - 验证邮件和URL

    $name = test_input($_POST["name"]); if (!preg_match("/^[a-zA-Z ]*$/",$name)) { $ ...

  5. IntelliJ IDEA 2019.2 LUA环境搭建说明

    1.搭建GCC 添加系统环境变量PATH  为C:\MinGW\bin目录 测试命令进入CMD    gcc -v 2.编译LUA cd到lua/src目录      mingw32-make min ...

  6. ubuntu19.10 相关软件安装

    1.Typora Typora是一款Markdown撰写软件,Linux版本也相当好用. Typora的安装方式如下: # or run: # sudo apt-key adv --keyserver ...

  7. Java之同步方法处理继承Thread类的线程安全问题

    /** * 使用同步方法处理继承Thread类的方式中的线程安全问题 * */class Window4 extends Thread { private static int ticket = 10 ...

  8. ZJNU 1262 - 电灯泡——中高级

    在影子没有到达墙角前,人越远离电灯,影子越长,所以这一部分无需考虑 所以只需要考虑墙上影子和地上影子同时存在的情况 因为在某一状态存在着最值 所以如果以影子总长与人的位置绘制y-x图像 会呈一个类似y ...

  9. Django的View（视图层）

    目录 Django的View(视图层) 一.JsonResponse 二.后端接收前端的文件 三. FBV和CBV(源码分析) 四.settings.py配置文件源码分析 五. 请求对象(HttpRe ...

  10. 决策树分类回归，ID3，c4.5，CART，及其Python代码

    决策树模型 内部节点表示一个特征或者属性,叶子结点表示一个类.决策树工作时,从根节点开始,对实例的每个特征进行测试,根据测试结果,将实例分配到其子节点中,这时的每一个子节点对应着特征的一个取值,如此递 ...