css - table 要点分析

前言：尺寸一定要计算精确 尽量不要使用百分比形式       cellpadding="0"  cellspacing="0"

一、background-image

tr中可以设置background-image:url(dd.gif);它是设置的整行的背景，如果你也同时设置了td的background-image 那么 td中的背景会覆盖tr中的背景。

二、border

tr中不能设置border  当然td中可以

三、width

tr中设置width 不管用的，它的宽度取决于td的宽度。td的宽度取决于其中内容的宽度，当然可以设置td的width，内容会撑开width的宽度。

四、height

tr中可以设置height,td中也可以设置height;两者都存在时，会取tr中的height值。值设置的太小时，内容也会撑开。这点需要特别注意：

例如：nbsp；情况 默认大小时13px的，如果外面设置的是5px，则显示还是13px！ 解决方式：style="font-size: 5px"

五、

<td >如果是空元素 使用 &nbsp;否则表示不出来

六、整个table行列规则整齐划一！

某列的宽度取决于该列中width的值最大的那个！

注意使用cospan处理跨行。

 

table-layout:fixed;

 

定义和用法

 

tableLayout 属性用来显示表格单元格、行、列的算法规则。

 

固定表格布局：

 

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

 

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

 

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

 

自动表格布局：

 

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

 

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

 

说明

 

该属性指定了完成表布局时所用的布局算法。固定布局算法比较快，但是不太灵活，而自动算法比较慢，不过更能反映传统的 HTML 表。

 

默认值：	auto
继承性：	yes
版本：	CSS2
JavaScript 语法：	object.style.tableLayout="fixed"

注意：                            一般的布局方式

第一：table-layout:fixed; text-overflow:ellipsis; white-space:nowrap; overflow:hidden;

第二：设计第一行

2.1  两端宽度固定

2.2  中间 第一项设置为 width:auto  第二、三 项等 设置合适的百分比

（原因 ：第一项 会占据 整个宽度减去设置了百分比的宽度 然后 与剩下的auto平分  ，如果没有auto 并且百分比 固定宽度 加起来没有占据整个宽度 那么最后一个固定长度的的宽度会调整 。

为什么在 第一项 设置为auto 因为 这样最美观！）