CSS表格笔录

尚衍亮

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;
}

效果：

CSS表格笔录