table中，表头固定，body滚动的方式。也就是使用：css Table布局-display:table

两种类型的表格布局

你有两种方式使用表格布局 -HTML Table（<table>标签）和CSS Table（display:table 等相关属性）。

HTML Table是指使用原生的<table>标签，而CSS Table是指用CSS属性模仿HTML 表格的模型。

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使用标签<table>、<tr>、<td>等标签，就是使用CSS Table的相关属性来实现的。从上面HTML4的默认样式表中可以看出他们的使用对于CSS属性的情况：

table：指定对象作为块元素级的表格。类同于html标签<table>（CSS2）
inline-table：指定对象作为内联元素级的表格。类同于html标签<table>（CSS2）
table-caption：指定对象作为表格标题。类同于html标签<caption>（CSS2）
table-cell：指定对象作为表格单元格。类同于html标签<td>（CSS2）
table-row：指定对象作为表格行。类同于html标签<tr>（CSS2）
table-row-group：指定对象作为表格行组。类同于html标签<tbody>（CSS2）
table-column：指定对象作为表格列。类同于html标签<col>（CSS2）
table-column-group：指定对象作为表格列组显示。类同于html标签<colgroup>（CSS2）
table-header-group：指定对象作为表格标题组。类同于html标签<thead>（CSS2）
table-footer-group：指定对象作为表格脚注组。类同于html标签<tfoot>（CSS2）
下面是一些 display:table 示例，你可能会发现它很有用：
· 动态垂直居中对齐


Html:
<button>添加多行</button>

<div class="box">
    <p>Double Line</p>
    <p>Double Line</p>
</div>


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官网看看说明文档。

直接贴代码：

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>转载自·威易网CSS教程</title>
<style>
table tbody {
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;}
</style>
</head>
<body>
<table width="80%" border="1">
<thead>
<tr>
<th>姓名</th>
<th>年龄</th>
<th>出生年月</th>
<th>手机号码</th>
<th>单位</th>
</tr>
</thead>
<tbody>
<tr>
<td>张三</td>
<td>18</td>
<td>1990-9-9</td>
<td>13682299090</td>
<td>阿里巴巴</td>
</tr>
<tr>
<td>张三封</td>
<td>18</td>
<td>1990-9-9</td>
<td>13682299090</td>
<td>阿里巴巴与四十大盗</td>
</tr>
<tr>
<td>张小三</td>
<td>18</td>
<td>1990-9-9</td>
<td>13682299090</td>
<td>腾讯科技</td>
</tr>
<tr>
<td>张三</td>
<td>18</td>
<td>1990-9-9</td>
<td>13682299090</td>
<td>浏阳河就业</td>
</tr>
<tr>
<td>张三疯子</td>
<td>18</td>
<td>1990-9-9</td>
<td>13682299090</td>
<td>阿里巴巴</td>
</tr>
<tr>
<td>张三</td>
<td>18</td>
<td>1990-9-9</td>
<td>13682299090</td>
<td>阿里巴巴</td>
</tr>
<tr>
<td>张大三</td>
<td>18</td>
<td>1990-9-9</td>
<td>13682299090</td>
<td>阿里巴巴</td>
</tr>
<tr>
<td>张三五</td>
<td>18</td>
<td>1990-9-9</td>
<td>13682299090</td>
<td>阿里巴巴</td>
</tr>
<tr>
<td>张刘三</td>
<td>18</td>
<td>1990-9-9</td>
<td>13682299090</td>
<td>阿里巴巴</td>
</tr>
<tr>
<td>张三</td>
<td>18</td>
<td>1990-9-9</td>
<td>13682299090</td>
<td>阿里巴巴</td>
</tr>
</tbody>
</table>
</body>
</html>

posted @ 2018-04-09 17:49 姗崽崽崽阅读(4758) 评论(0) 编辑收藏举报

会员力量，点亮园子希望

刷新页面返回顶部

sunshine

table中，表头固定，body滚动的方式。也就是使用：css Table布局-display:table

两种类型的表格布局

· 动态垂直居中对齐

公告