尚衍亮 2018-02-01
属性 描述
border-collapse 设置是否把表格边框合并为单一的边框
border-spacing 设置分隔单元格边框的距离
caption-side 设置表格标题的位置
empty-cells 设置是否显示表格中的空单元格
table-layout 设置显示单元、行和列的算法
【注意:】如果没有规定 !DOCTYPE,以上属性可能产生意想不到的结果
①border-collapse:合并表格边框
默认值为separate(分离),边框会被分开,且不会忽略 border-spacing 和 empty-cells 属性
collapse(缩合)边框会合并为一个单一的边框,会忽略 border-spacing 和 empty-cells 属性
②border-spacing:设置单元格距离
设置相邻单元格的边框间的距离(仅用于“边框分离”模式),不过某些版本的IE浏览器不支持此属性
在指定的两个长度值中,第一个是水平间隔,第二个是垂直间隔。除非 border-collapse 被设置为 collapse,否则将忽略这个属性
如果定义一个 length 参数,那么定义的是水平和垂直间距;如果定义两个 length 参数,那么第一个设置水平间距,而第二个设置垂直间距。不允许使用负值
③caption-side (标题端):表格标题的位置
指定表标题相对于表框的放置位置,表标题显示为好像它是表之前(或之后)的一个块级元素
<caption>定义表格标题,必须紧随 table 标签之后。只能对每个表格定义一个标题,通常这个标题会被居中于表格之上
<style type="text/css"> caption{caption-side:bottom} </style> <table border="1"> <caption>这是标题</caption> <tr> <td>Adams</td> <td>John</td> </tr> <tr> <td>Bush</td> <td>George</td> </tr> </table>
【属性值】
top 默认值,把表格标题定位在表格之上;
bottom 把表格标题定位在表格之下
④empty-cells(空单元格):设置是否显示表格中的空单元格(仅用于“分离边框”模式)
如果显示,就会绘制出单元格的边框和背景。除非 border-collapse 设置为 separate,否则将忽略这个属性
一般默认显示空单元格
<style type="text/css"> table{ border-collapse: separate; empty-cells: hide; } </style> <table border="1"> <tr> <td>Adams</td> <td>John</td> </tr> <tr> <td>Bush</td> <td></td> </tr> </table>
【属性值】
hide 不在空单元格周围绘制边框;
show 默认值,在空单元格周围绘制边框。
⑤表格布局(自动表格布局和固定表格布局)
table-layout属性值:auto、fixed、inherit(IE不支持)
1 . auto:默认,自动表格布局
列宽度由单元格中没有折行的最宽的内容设定。此算法有时比较慢,这是由于它需要在确定最终的布局之前访问表格中所有的内容
2 . fixed:固定表格布局
水平布局仅仅取决于表格宽度、列宽度、表格边框宽度、单元格间距、而与单元格的内容无关。与自动表格布局相比,允许浏览器更快地对表格进行布局。通过固定表格布局用户代理在接收到第一行后就可以显示表格
如果指定了单元格的宽度,则会按指定的宽度限定每个单元格宽度,跟内容无关(如果指定的是比例,会永远保持这个比例),这样就可能出现内容飘到单元格之外的情况;如果没有指定单元格的宽度,则会根据table的总宽度平分到每个单元格
例子:
<div class="test-table-box"> <table width="100%" cellpadding="0" cellspacing="0" border="0"> <tr> <th scope="col">1</th> <th scope="col">2</th> <th scope="col">3</th> </tr> <tr> <td>中文</td> <td class="ellipse"> table-layout属性有auto、fixed和inherit三个值那么这三个值的效果是什么样的呢? </td> <td>2016/07/21 14:28</td> </tr> <tr> <td>英文</td> <td class="wb"> haolezheyihangwomendouhuachenghanyupinyinkanxiayingwendexiaoguoshishen meyangdehuibuhuihuanhangshenmedeceshiyixiaxiaoguo </td> <td>2016/07/21 14:28</td> </tr> </table> </div> <div class="test-table-box"> <table class="layout-fixed" width="100%" cellpadding="0" cellspacing="0" border="0"> <tr> <th scope="col">1</th> <th scope="col">2</th> <th scope="col">3</th> </tr> <tr> <td>中文</td> <td class="ellipse"> table-layout属性有auto、fixed和inherit三个值那么 这三个值的效果是什么样的呢?</td> <td>2016/07/21 14:28</td> </tr> <tr> <td>英文</td> <td class="wb"> haolezheyihangwomendouhuachenghanyupinyinkanxiayi ngwendexiaoguoshishenmeyangdehuibuhuihuanhangshenmedeceshiyixiaxiaoguo </td> <td>2016/07/21 14:28</td> </tr> </table> </div>
.test-table-box table{ border-bottom: 1px solid red; border-left: 1px solid red; } .layout-fixed{ table-layout: fixed; } .wb{/*连续英文数字字符换行*/ word-break: break-all; } .ellipse{/*单行文字超出时用省略号显示*/ white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .test-table-box th, .test-table-box td{ border-top: 1px solid red; border-right: 1px solid red; padding: 5px; text-align: center; white-space: pre-wrap; }
效果:
固定表格布局:
固定表格布局与自动表格布局相比,允许浏览器更快地对表格进行布局。
在固定表格布局中,水平布局仅取决于表格宽度、列宽度、表格边框宽度、单元格间距,而与单元格的内容无关。
通过使用固定表格布局,用户代理在接收到第一行后就可以显示表格。
自动表格布局:
在自动表格布局中,列的宽度是由列单元格中没有折行的最宽的内容设定的。
此算法有时会较慢,这是由于它需要在确定最终的布局之前访问表格中所有的内容。