关键词：
table头部、尾部固定;中间内容定高自适应滚动
很多时候，需要使用到表格做数据分析，不管是前端展现，还是后台管理系统节点展现
工作过程中遇到了，作为一个小笔记，备忘！
如下图所示
---------------------------------------------------------------------------------------------------------------------
------------------------------------------------------------------------------------------------------------------------------
表格的头部，和尾部是固定不动的，中间内容随着内容的增多，而出现滚动条。
<!--container-->
<div class="container">
<table class="form-table" cellpadding="0" cellspacing="0">
<thead class="fixed-thead" id="head">
<tr>
<th>序号</th>
<th>姓名</th>
<th>性别</th>
<th>年龄</th>
</tr>
</thead>
<tbody class="scroll-tbody" id="body">
<tr>
<td>1</td>
<td>张三</td>
<td>男</td>
<td>18</td>
</tr>
</tbody>
<tfoot class="fixed-tfoot">
<tr>
<td>序号</td>
<td>姓名</td>
<td>性别</td>
<td>年1龄</td>
</tr>
</tfoot>
</table>
</div>
<!--container-->
如上html结构简单。精简。
/*各个部分样式*/
@charset "utf-8";
body{
overflow: hidden;
}
.container {
border: 1px #ccc solid;
width: 90%;
margin: 100px auto;
}
.form-table {
width: 100%;
border-collapse: collapse;
margin: 0 auto;
text-align: center;
table-layout: fixed;
}
.form-table th {
border-left: none;
border-top: none;
border-right: 1px #ccc solid;
border-bottom: 1px #ccc solid;
background: #F3F3F3;
}
.form-table td {
border-left: none;
border-top: none;
border-bottom: 1px #ccc solid;
border-right: 1px #ccc solid;
}
.fixed-thead,
.fixed-tfoot {
display: block;
/*width: 99%;*/
width: -webkit-calc(100% - 17px);
width: -moz-calc()(100% - 17px);
width: calc(100% - 17px);
height: 50px;
}
.fixed-tfoot tr td {
background: #F3F3F3;
border-bottom: none;
}
.fixed-thead tr,
.fixed-tfoot tr {
width: 100%;
height: 50px;
line-height: 50px;
display: block;
}
.fixed-thead tr th,
.fixed-tfoot tr td {
float: left;
display: block;
width: 25%;
height: 50px;
font-size: 16px;
text-align: center;
}
.scroll-tbody {
display: block;
height: 306px;
overflow: auto;
width: 100%;
}
.scroll-tbody tr {
width: 100%;
display: block;
height: 40px;
line-height: 40px;
}
.scroll-tbody tr td {
float: left;
display: block;
width: 25%;
}
.form-table .scroll-tbody tr:nth-child(odd) td {
background-color: #ECE9D8;
}
-------------------核心对齐样式---------------------
width: -webkit-calc(100% - 17px);
width: -moz-calc()(100% - 17px);
width: calc(100% - 17px);
兼容高级浏览器
-----------------------------------------------------
为了兼容IE6，可以使用如下 js去实现
<script type="text/javascript">
window.onload=window.onresize=function (){
var body=document.getElementById("body");
var head=document.getElementById("head");
head.style.width=(body.scrollWidth)+"px";
}
</script>
----------------------------------------------------
css头部和尾部固定，中间可以动态
1<template>2<divid="app">3<router-view/>45<divclass="dHeadlistlist-purposedTitle">6<transitionenter-active-class="animatedzoomInLeft"7leave-active-class="animatedzoomInRight 查看详情
antdvuetable滚动页面固定表头
页面滚动固定表头思路由于直接去控制antdtable的头部置顶会导致头部样式丢失，每列去获取宽度设置感觉太麻烦，最后决定使用两个table，一个只做表头固定使用，不赋予数据。具体做法时，将传入的属于都付给两个table，隐藏... 查看详情
头尾固定高度中间高度自适应布局
一，头尾固定中间高度自适应布局 布局要求： 1头部固定高度，宽度100%自适应父容器； 2底部固定高度，宽度100%自适应父容器； 3中间是主体部分，自动填满，浏览器可视区域剩余部分，内容超出则中间部分出现... 查看详情
如何设置css让页面头部和底部固定中间内容滚动?
就是头部贴页面顶部，底部贴页面底部。全屏的时候，刚好页面是没有滚动条的。当页面缩小的时候，头部和底部还是固定在两头，让中间部分产生滚动条。页面分成了三个部分，三个部分分开写在不同的页面里，然后调用。整... 查看详情
全屏布局
...面我们来实现一种全屏布局，它的整体宽度自适应、高度固定，横向分为三栏，分别为顶栏、主内容区、底栏，顶栏与底栏定高，主内容区高度自适应。主内容区又分为左边栏和右边栏，左边栏定宽，右边栏宽高自适应。滚动条... 查看详情
布局：上下两个div高度固定，中间自适应
...求：经典布局—— 头尾固定高度中间高度自适应布局头部固定高度，宽度100%自适应父容器；底部固定高度，宽度100%自适应父容器；中间是主体部分，自动填满，浏览器可视区域剩余部分，内容超出则中间部分出现流动条；... 查看详情
布局问题：（头部，底部固定，并且头部吸顶，底部吸底，中间自适应（内容多可以scroll））(代码片段)
1<!DOCTYPEhtml>2<htmllang="en">3<head>4<metacharset="UTF-8">5<metaname="viewport"content="width=device-width,initial-scale=1.0">6<metahttp-equiv="X-UA-Compatible"content="ie=edge">7<title>Document</title>8<style>9html,body,ul,li,p10margin:0;11pad... 查看详情
python去除空格的方法(代码片段)
...意replace第一个冒号中间有一个空格）#去掉全部空格头部，尾部，中间key=input("输入内容").replace("","")print("我是头部:"+key+":我是尾部")实现效果 使用join和spilt #去掉全部空格头部... 查看详情
三行布局（中间自适应，上下端定高）
效果：代码：<!DOCTYPEhtml><html><head> <title>三行布局</title> <style> * margin:0; padding:0; .main,html,body height:100%; width:100%; .main display:flex; flex-d 查看详情
jsp网页移动滚动条怎么做到头部不动，就中间和下部动？
...导致内容也无法滚动，请问大妞们有什么解决办法？你把头部的div设置绝对应为，属性为position：fixed，就可以实现，一般这个属性用来设置网页左右两侧的广告栏位，内容下拉广告栏位仍在相对浏览器的中间位置参考技术A你隐... 查看详情
bootstraptable实现固定悬浮table表头并可以水平滚动
在开发项目中，需要将表格头部固定，而且表格大多数情况下是会水平滚动的。项目的css框架是bootstrap3，故也可以叫做bootstraptable。需要实现的是：表格头部固定，并且支持水平滚动htmlcode(sourcetable):<tableid="top_fix_table"border="0"c... 查看详情
移动端固定头部和固定左边第一列的实现方案（vue中实现demo）
...表，需要左右滚动时，固定左边部分；上下滚动时，固定头部部分。代码在Vue中简单实现主要思路是:a.左边部分滚动，实时修改右边部分的滚动条高度b.头部和内容部分都设置固定高度，当内容部分内容高度大于设置的高度时，... 查看详情
移动端尾部和头部固定
<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width,initial-scale=1.0"><metahttp-equiv="X-UA-Compatible"content="ie 查看详情
上下高度固定中间自适应的布局方式
（1）：定位子盒子用绝对定位（千万别给父盒子加相对定位）（2）flex布局（3）使用grid网格布局:（4）使用table布局，一定要套一个空div，要不然整个页面都是空白的 查看详情
table实现表头固定内容滚动
<divstyle="width:800px;"><divclass="table-head"><table><colgroup><colstyle="width:80px;"/><col/></colgroup><thead><tr><th>序号</th><t 查看详情
解决table固定行和列，导致滚动条显示
实现了列固定，头部行固定左侧，右侧两个div，左侧滚动，右着滚动，但是左侧会出现滚动条使用鼠标滚动事件监听左侧 //滚动事件varscrollFunc=function(e){e=e||window.event;if(e.wheelDelta==120||e.detail==-3){$(‘#cl_freeze‘).scrollTop($(‘#cl_fr... 查看详情
高度固定，左右宽度300，中间自适应
方法1：浮动左边盒子左浮动，宽度为300px,右边盒子右浮动，宽度为300px,给div设置一个min-height:100px,中间盒子设置margin:0300px.方法2：定位 整个div都用绝对定位，左边盒子left:0,width:300px;右边盒子right:0,width:300px;中间盒子left:300,;ri... 查看详情
页面内容小于一屏时仍能头部在头部尾部在尾部
<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><title>页面内容小于一屏时仍能头部在头部尾部在尾部</title><style>*{padding:0;margin:0;text-align:center;}/*html,body{height: 查看详情