首页 诗词 字典 板报 句子 名言 友答 励志 学校 网站地图
当前位置: 首页 > 教程频道 > 软件管理 > 软件架构设计 >

table-layout:fixed导致单元格宽度不受控制的有关问题

2012-11-05 
table-layout:fixed导致单元格宽度不受控制的问题  我遇到这个问题是由于我第一行有个单元格占了多列,fixe

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



网页代码很如下:


  如果把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;
   }
   然后把第一行加上border="0" cellpadding="3" cellspacing="1" bgcolor="#000000" style="table-layout:fixed">
<colgroup>
<col style="width:10%;"></col>
<col style="width:30%;"></col>
<col style="width:40%;"></col>
<col style="width:10%;"></col>
<col></col>
</colgroup>
<tr>
    <td colspan="5">&nbsp;</td>
  </tr>  <tr>
    <td  nowrap bgcolor="#FFFFFF">文字文字文字文字文字文字</td>
    <td bgcolor="#FFFFFF">&nbsp;</td>
    <td bgcolor="#FFFFFF">&nbsp;</td>
    <td bgcolor="#FFFFFF">&nbsp;</td>
    <td bgcolor="#FFFFFF">&nbsp;</td>
  </tr>
  <tr>
    <td bgcolor="#FFFFFF">&nbsp;</td>
    <td bgcolor="#FFFFFF">&nbsp;</td>
    <td bgcolor="#FFFFFF">&nbsp;</td>
    <td bgcolor="#FFFFFF">&nbsp;</td>
    <td bgcolor="#FFFFFF">&nbsp;</td>
  </tr></table>
4 楼 fxdan2002 2010-07-27   既然第一行起作用,那我就定义一下第一行不就行了。
用colgroup定义。 5 楼 wcnjeusr 2012-06-27   tks 纠结了很长时间的终于找到答案了

热点排行