关于表格table-layout:fixed属性的问题

在改css样式时td设置宽度width无效
 
后面发现对表格设置table-layout:fixed属性以后，如果表格的第一行tr中的td设置过单元格合并即使用了colspan属性，后面tr中的td无论如何设置宽度都没有任何效果。

解决办法

1.在表格的第一行设置一个隐藏的行或者去掉table-layout:fixed属性

<table style="table-layout: fixed; width:100%;">
	<tr style="display:none">
		<td width="30%"></td>
		<td width="40%"></td>
		<td width="30%"></td>
	</tr>
	<tr>
		<td colspan="3">统计表</td>
	</tr>
	<tr>
		<td>111</td>
		<td>222</td>
		<td>333</td>
	</tr>
</table>

2.在表格的tbody前插入col元素

对于表格单元格文字过长，可以通过设置td的属性word-wrap:break-word

<table>
	<col style="width:100px"/>
	<col style="width:200px"/>
	<col style="width:300px"/>
	<tbody>
	<tr>
		<td colspan="3">统计表</td>
	</tr>
	<tr>
		<td>111</td>
		<td>222</td>
		<td>333</td>
	</tr>
	</tbody>

定义和用法

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

• 固定表格布局：（table-layout: fixed）

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

  • auto属性：

    当设置为auto属性，也就是table-layout属性的时候，如果表格设置了width属性height属性，那么表格的宽度和高度就是设置的值。不管你是否设置了单元格的高宽值，表格的高宽都已经限定了！如果没有设定，那么表格宽度高度则为单元格宽高（包括一些padding、border属性等）累积的总和。

• 自动表格布局：（table-layout: auto）

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

  • fixed属性：

    但是当设置了fixed属性的时候，如果表格设置了width属性height属性，如果设置的单元格宽高累加起来的总和比表格设置的宽高总和要大，那么表格的实际宽高就为每个单元格宽高累积的总和，但是如果单元格累积的总和比表格自己设计的要小，那么表格的宽高属性则为表格设置的宽高值。