1.给元素的display属性添加为以下值
table使该元素按table样式渲染
table-row使该元素按tr样式渲染
table-cell使该元素按td样式渲染
table-row-group使该元素按tbody样式渲染
table-header-group使该元素按thead样式渲染
table-footer-group使该元素按tfoot样式渲染
table-caption使该元素按caption样式渲染
table-column使该元素按col样式渲染
table-column-group使该元素按colgroup样式渲染
2.实现简单的三列布局
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>css html</title>
<style type="text/css">
.container {
display: table;
}
.row {
display: table-row;
}
.cell {
display: table-cell;
width: 100px;
height: 100px;
border: 1px solid blue;
padding: 1em;
}
</style>
</head>
<body>
<div class="container">
<div class="row">
<div class="cell">CELL A</div>
<div class="cell">CELL B</div>
<div class="cell">CELL C</div>
</div>
</div>
</body>
</html>
3.如果我们为元素使用“display:table-cell;”属性，而不将其父容器设置为“display:table-row;”属性，浏览器会默认创建出一个表格行，就好像文档中真的存在一个被声明的表格行一样
即以下部分可以省略
<div class=”container”>
<div class=”row”>
.container {
display: table;
}
.row {
display: table-row;
}
4.其他有用的属性
table-layout 将table-layout属性设置为fixed可以让浏览器按照固定算法来渲染单元格的宽度。
Border-collapse 定义边框
Border-spacing 声明“border-collapse:separate;”后，可用border-spacing属性来定义相邻两个单元格边框间的距离。
时间： 2024-10-14 23:22:25