table css样式设定中的宽度设定

本文探讨了表格布局中样式设定与自适应之间的冲突,解释了table-layout:fixed;的作用及工作原理,并提供了解决样式被忽略问题的方法,包括通过隐藏第一行并设置固定样式来实现统一布局。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

在对table进行样式设定的过程中,有些时候会发觉表格样式设定了,但样式却会自适应或不改变,利用table-layout:fixed;可以在有效范围内改变一些表格样式,但在实际应用中,很多样式还是不能改变。实际上,还是这个属性的原因:先了解一下fixed布局模型的工作步骤:
1.width属性值不是auto的所有列元素会根据width值设置该列的宽度.
2.如果一个列的宽度为auto---但是,表首行中位于该列的单元格width不是auto---则根据该单元格宽度设置此列的宽度.如果这个单元格跨多列,则宽度在这些列上平均分配.
3.在以上两步之后,如果列的宽度仍为auto,会自动确定其大小,使其宽度尽可能相等.此时,表的宽度设置为表的width值或列宽度之和(取其中较大者).如果表度度大于其列宽总和,将二者之差除以列数,再把得到的这个宽度增加到每一列上.
.........................................
  这种方法的速度很快,因为所有列宽都由表的第一行定义.首行后所有行中的单元格都根据首行所定义的列宽确定大小.后面这些行中的单元格不会改变列宽.这意味着为这些单元格指定的width值都会被忽略.

这就是导致表格宽度被忽略的真正原因,为了解决这个问题,有人这么做:

tr.first{
     height:1px;
     font-size:1px;
     line-height:1px;
   }
   然后把第一行加上class="first"。
但是我试了还是不行,因为我的行是动态生成的,最后这样做解决的问题:

<tr class='first' style='display:none;'>

<td  style='width:140px;'></td>

<td  style='width:140px;'></td>"

"<td style='width:440px;'> </td></tr>

这样就相当于以后样式都使用第一样的样式

当然,也可以直接去掉table-layout:fixed;不过表格很多宽度就变得不可控了。


评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值