CSS表格笔录

2018-02-03 10:24:41来源:http://570109268.iteye.com作者:青春..荒唐人点击

分享

属性                                              描述

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 >    <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 >          table-layout属性有auto、fixed和inherit三个值那么这三个值的效果是什么样的呢?            </td>            <td>2016/07/21 14:28</td>        </tr>        <tr>            <td>英文</td>            <td >               haolezheyihangwomendouhuachenghanyupinyinkanxiayingwendexiaoguoshishen              meyangdehuibuhuihuanhangshenmedeceshiyixiaxiaoguo            </td>            <td>2016/07/21 14:28</td>        </tr>    </table></div><div >    <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 >              table-layout属性有auto、fixed和inherit三个值那么                 这三个值的效果是什么样的呢?</td>            <td>2016/07/21 14:28</td>        </tr>        <tr>            <td>英文</td>            <td >                 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;}

 效果: 

 

这里写图片描述

固定表格布局:

固定表格布局与自动表格布局相比,允许浏览器更快地对表格进行布局。

在固定表格布局中,水平布局仅取决于表格宽度、列宽度、表格边框宽度、单元格间距,而与单元格的内容无关。

通过使用固定表格布局,用户代理在接收到第一行后就可以显示表格。

自动表格布局:

在自动表格布局中,列的宽度是由列单元格中没有折行的最宽的内容设定的。

此算法有时会较慢,这是由于它需要在确定最终的布局之前访问表格中所有的内容。

 

 

最新文章

123

最新摄影

闪念基因

微信扫一扫

第七城市微信公众平台