CSS使用table-layout:fixed后导致单元格宽度不受控制的问题解决-css教程-PHP中文网

CSS使用table-layout:fixed后导致单元格宽度不受控制的问题解决

黄舟

发布： 2017-06-30 13:54:18

原创

4637人浏览过

我遇到这个问题是由于我第一行有个单元格占了多列，fixed导致被占的列总是平均分配列宽。看看下面的说法，终于搞清楚原因了。
　　网页上的表格如下图所示：

网页代码如下：

<style type="text/css">  
    table{  
    border-collapse:collapse;  
    /*table-layout:fixed;*/  
    }  
    table,table td{  
        border-color:blue;  
    }  
</style>  
<table width="400" border="1" style="border-color:blue;border-collapse:collapse">  
<tr>  
<td width="50%">1</td><td colspan="2">2</td>  
</tr>  
<tr>  
<td>3</td><td width="10%">4</td><td width="40%">5</td>  
</tr>  
<tr>  
<td colspan="3">http://wallimn.iteye.com</td>  
</tr>  
</table>

登录后复制

<style type="text/css">
	table{
	border-collapse:collapse;
	/*table-layout:fixed;*/
	}
	table,table td{
		border-color:blue;
	}
</style>
<table width="400" border="1" style="border-color:blue;border-collapse:collapse">
<tr>
<td width="50%">1</td><td colspan="2">2</td>
</tr>
<tr>
<td>3</td><td width="10%">4</td><td width="40%">5</td>
</tr>
<tr>
<td colspan="3">http://wallimn.iteye.com</td>
</tr>
</table>

登录后复制

　　如果把table-layout:fixed的注释去掉，表格就会变成如下样子(注意看，4与5变成等宽的了)：

　　这是什么原因呢？需要了解一下fixed布局模型的工作步骤：
1.width属性值不是auto的所有列元素会根据width值设置该列的宽度.
2.如果一个列的宽度为auto---不过,表首行中位于该列的单元格width不是auto---则根据该单元格宽度设置此列的宽度.如果这个单元格跨多列,则宽度在这些列上平均分配.
3.在以上两步之后,如果列的宽度仍为auto,会自动确定其大小,使其宽度尽可能相等.此时,表的宽度设置为表的width值或列宽度之和(取其中较大者).如果表度度大于其列宽总和,将二者之差除以列数,再把得到的这个宽度增加到每一列上.
.........................................
　　这种方法的速度很快,因为所有列宽都由表的第一行定义.首行后所有行中的单元格都根据首行所定义的列宽确定大小.后面这些行中的单元格不会改变列宽.这意味着为这些单元格指定的width值都会被忽略.

2010-09-13

　　这个问题比较好解决，可以把表格的第一行行高设置为1px，专门用来分配列宽。
　

　tr.first{ 
     height:1px; 
     
font-size
:1px; 
     
line-height
:1px; 
   }

登录后复制

然后把第一行加上class="first"。

　　当然，也可以通过不使用fixed属性来解决。

转帖人PS：这个问题不光会导致同一个table的列宽度无法控制，同样也会导致两个table的单元格宽度不一致，比如一个table 四列，每一列25%，另一个table也是一样，但是它第一行colspan了第二列到第四列，那么两个table的第一列宽度就不一致了（使用table-layout:fixed）。

以上就是CSS使用table-layout:fixed后导致单元格宽度不受控制的问题解决的详细内容，更多请关注php中文网其它相关文章！