<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta ="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
/**
语法：
display:table ;使该元素按table样式渲染 。
display:table-row; 使该元素按tr样式渲染 。
display:table-cell ;使该元素按td样式渲染 。
display:table-row-group ;使该元素按tbody样式渲染 。
display:table-header-group; 使该元素按thead样式渲染 。
display:table-footer-group; 使该元素按tfoot样式渲染 。
display:table-caption; 使该元素按caption样式渲染 。
display:table-column; 使该元素按col样式渲染 。
display:table-column-group ;使该元素按colgroup样式渲染 。
*/
.container {
display: table;
}
.row {
display: table-row;
}
.cell {
display: table-cell;
width: 100px;
height: 36px;
border: 1px solid blue;
line-height: 36px;
text-align: center;
}
.table-one,.table-two{
border-spacing: 0;
}
.table-one td,.table-two th{
width: 100px;
height: 36px;
border: 1px solid blue;
text-align: center;
}
</style>
</head>
<body>
<h2>方法1：使用与表格相关的display属性值布局</h2>
<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>
<h3>减少标签</h3>
<p>即使下面的代码遗漏了声明表格的那一行，浏览器仍将创建一个匿名的表格行</p>
<div class="row">
<div class="cell">CELL A</div>
<div class="cell">CELL B</div>
<div class="cell">CELL C</div>
</div>
<h3>移除更多代码</h3>
<p>以下代码遗漏了声明表格和表格行的代码，浏览器同样会创建出这些匿名的盒对象。即使缺少这些标签元素，最终的效果仍然是一样的。 </p>
<div class="cell">CELL A</div>
<div class="cell">CELL B</div>
<div class="cell">CELL C</div>
<!--
创建匿名表格元素的规则：
这些匿名的盒对象不是变出来的，也不会自动往HTML源码中添加新的标签。
如果布局中调用了匿名元素，浏览器将会根据需要创建一个匿名的盒对象并将它的CSS display属性设置为table、table-row或table-cell中的一个。
如果某个元素已经被设置为“display:table-cell;”，而它的父节点（包含它的容器）没有被设置为“display:table-row;”属性，那么浏览器将会创建一个被设置为“display:table-row;”的匿名盒对象来嵌套它。
并且与之相邻的属性为“display: table-cell;”的兄弟节点也都会被这个匿名盒对象所包含，直到碰到一个没有被设置为“display: table-cell;”的元素而结束这一行。
-->
<h2>方法2：使用table及相关元素布局</h2>
<table class="table-one">
<tr>
<td>CELL A</td>
<td>CELL B</td>
<td>CELL C</td>
</tr>
</table>
<table class="table-two">
<tr>
<th>CELL A</th>
<th>CELL B</th>
<th>CELL C</th>
</tr>
</table>
</body>
</html>
前端工程师答题地址
