视频1 视频21 视频41 视频61 视频文章1 视频文章21 视频文章41 视频文章61 推荐1 推荐3 推荐5 推荐7 推荐9 推荐11 推荐13 推荐15 推荐17 推荐19 推荐21 推荐23 推荐25 推荐27 推荐29 推荐31 推荐33 推荐35 推荐37 推荐39 推荐41 推荐43 推荐45 推荐47 推荐49 关键词1 关键词101 关键词201 关键词301 关键词401 关键词501 关键词601 关键词701 关键词801 关键词901 关键词1001 关键词1101 关键词1201 关键词1301 关键词1401 关键词1501 关键词1601 关键词1701 关键词1801 关键词1901 视频扩展1 视频扩展6 视频扩展11 视频扩展16 文章1 文章201 文章401 文章601 文章801 文章1001 资讯1 资讯501 资讯1001 资讯1501 标签1 标签501 标签1001 关键词1 关键词501 关键词1001 关键词1501 专题2001
CSS使用table-layout:fixed后导致单元格宽度不受控制的问题解决
2020-11-27 18:50:44 责编:小采
文档
我遇到这个问题是由于我第一行有个单元格占了多列,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>


  如果把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)。

下载本文
显示全文
专题