css样式固定表头表体可以滑动_table中，表头固定，body滚动的方式。也就是使用：css Table布局-display:table...

两种类型的表格布局

你有两种方式使用表格布局 -HTML Table(

HTML Table是指使用原生的

js 代码:

table    { display: table }

tr       { display: table-row }

thead    { display: table-header-group }

tbody    { display: table-row-group }

tfoot    { display: table-footer-group }

col      { display: table-column }

colgroup { display: table-column-group }

td, th   { display: table-cell }

caption  { display: table-caption }

显而易见HTML Table使用标签

(CSS2)

等标签，就是使用CSS Table的相关属性来实现的。从上面HTML4的默认样式表中可以看出他们的使用对于CSS属性的情况： table：指定对象作为块元素级的表格。类同于html标签 inline-table：指定对象作为内联元素级的表格。类同于html标签 table-caption：指定对象作为表格标题。类同于html标签

table-cell：指定对象作为表格单元格。类同于html标签

(CSS2)

table-row：指定对象作为表格行。类同于html标签

(CSS2)

table-row-group：指定对象作为表格行组。类同于html标签

(CSS2)

table-column：指定对象作为表格列。类同于html标签

(CSS2)

table-column-group：指定对象作为表格列组显示。类同于html标签

(CSS2)

table-header-group：指定对象作为表格标题组。类同于html标签(CSS2)

table-footer-group：指定对象作为表格脚注组。类同于html标签

(CSS2)

下面是一些 display:table 示例，你可能会发现它很有用：

· 动态垂直居中对齐

Html:添加多行

Double Line

Double Line

LESS

body {

color: @beige;

background: @green;

display: table;

width:100%;

height:100%;

}

.box {

display:table-cell;

vertical-align: middle;

text-align: center;

}/*====== Ignore section below ======*/@orange: #BD4932;

@yellow: #FFD34E;

@green: #105B63;

@beige: #FFFAD5;/*Basic Style*/

* { margin:0; padding:0;}

html, body { height:100%; }

button { padding: 5px 10px;position:absolute;bottom: 20px;left:20px;display: block;-webkit-appearance: none;background: @orange; outline: none; border: 2px solid #DB9E36; color: @yellow; border-radius: 10px; box-shadow: 0 2px 3px rgba(0,0,0,0.5);cursor: pointer;}

button:active {border-color: @beige; color:@beige;}

JS

document.querySelector("button").addEventListener("click", function(){var element = document.createElement("p");

element.innerText= "额外添加的行";

document.querySelector(".box").appendChild(element);

这也许是使用display:table最常见的例子了。对于动态高度的元素，有了它，就可以实现真正的垂直(居中)对齐。

还有另一个不用display:table实现的垂直居中的简单方式，您可能感兴趣：

table表格，让thead固定，tbody有滚动条，关键是都对齐的纯css写法

找了好久才找到一篇可以简单粗暴就能用的，所以拿过来算是收藏了。里面有一个css2里的命令是我没用过的也是这里面关键的：table-layout:fixed;

原理很简单，有爱研究的童鞋可以去css官网看看说明文档。

直接贴代码：

转载自·威易网CSS教程

display:block;

height:195px;

overflow-y:scroll;

}

table thead, tbody tr {

display:table;

width:100%;

table-layout:fixed;

}

table thead {

width: calc(100% -1em )

}

table thead th{ background:#ccc;}

姓名年龄出生年月手机号码单位

张三181990-9-913682299090阿里巴巴张三封181990-9-913682299090阿里巴巴与四十大盗张小三181990-9-913682299090腾讯科技张三181990-9-913682299090浏阳河就业张三疯子181990-9-913682299090阿里巴巴张三181990-9-913682299090阿里巴巴张大三181990-9-913682299090阿里巴巴张三五181990-9-913682299090阿里巴巴张刘三181990-9-913682299090阿里巴巴张三181990-9-913682299090阿里巴巴