两种类型的表格布局
你有两种方式使用表格布局 -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使用标签
等标签,就是使用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阿里巴巴