css表单

属性 描述

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 （标题端）：表格标题的位置

指定表标题相对于表框的放置位置，表标题显示为好像它是表之前（或之后）的一个块级元素

定义表格标题,必须紧随 table 标签之后。只能对每个表格定义一个标题，通常这个标题会被居中于表格之上

Html代码 收藏代码

这是标题

Adams	John
Bush	George

【属性值】

top 默认值，把表格标题定位在表格之上；

bottom 把表格标题定位在表格之下

④empty-cells（空单元格）：设置是否显示表格中的空单元格（仅用于“分离边框”模式）

如果显示，就会绘制出单元格的边框和背景。除非 border-collapse 设置为 separate，否则将忽略这个属性

一般默认显示空单元格

Html代码 收藏代码

Adams	John
Bush

【属性值】

 hide                                    不在空单元格周围绘制边框；

 show                                 默认值，在空单元格周围绘制边框。

⑤表格布局（自动表格布局和固定表格布局）

table-layout属性值：auto、fixed、inherit（IE不支持）

1 . auto：默认，自动表格布局

列宽度由单元格中没有折行的最宽的内容设定。此算法有时比较慢，这是由于它需要在确定最终的布局之前访问表格中所有的内容

2 . fixed：固定表格布局

水平布局仅仅取决于表格宽度、列宽度、表格边框宽度、单元格间距、而与单元格的内容无关。与自动表格布局相比，允许浏览器更快地对表格进行布局。通过固定表格布局用户代理在接收到第一行后就可以显示表格

如果指定了单元格的宽度，则会按指定的宽度限定每个单元格宽度，跟内容无关（如果指定的是比例，会永远保持这个比例），这样就可能出现内容飘到单元格之外的情况；如果没有指定单元格的宽度，则会根据table的总宽度平分到每个单元格

例子：

Html代码 收藏代码

1	2	3
中文	table-layout属性有auto、fixed和inherit三个值那么这三个值的效果是什么样的呢？	2016/07/21 14:28
英文	haolezheyihangwomendouhuachenghanyupinyinkanxiayingwendexiaoguoshishen meyangdehuibuhuihuanhangshenmedeceshiyixiaxiaoguo	2016/07/21 14:28

1	2	3
中文	table-layout属性有auto、fixed和inherit三个值那么 这三个值的效果是什么样的呢？	2016/07/21 14:28
英文	haolezheyihangwomendouhuachenghanyupinyinkanxiayi ngwendexiaoguoshishenmeyangdehuibuhuihuanhangshenmedeceshiyixiaxiaoguo	2016/07/21 14:28

Css代码 收藏代码 .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; } 效果：

这里写图片描述

固定表格布局：

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

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

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

自动表格布局：

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

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