全站年SVIP
全站1000+试题无限查看
代码如下：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="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>
CSS 布局之 Table 布局
代码如下：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="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>