Rumah > Artikel > hujung hadapan web > css中table-layout:fixed为什么表格大小会改变?
第一次打开
显示正确
点击删除后
表格变小了。
这是为什么?
订单回收站是一个固定大小的层下面是表格(tablesorter)
<div class="tableHeader" style="width:928px">订单回收站</div> <table class="tablesorter" cellspacing="1" style="word-break:break-all;table-layout:fixed;"> <thead> <tr> <th style="width:40px;">选择</th> <th style="width:100px;">品名</th> <th style="width:70px;">照片</th> <th style="width:80px;">订货时间</th> <th style="width:90px;">颜色</th> <th style="width:50px;">数量</th> <th style="width:60px;">单价</th> <th style="width:60px;">总价</th> <th style="width:100px;">生产状态</th> <th style="width:100px;">备注</th> <th style="width:80px;">客户</th> </tr> </thead> <tbody> <tr> <td><input name="chk_list" type="checkbox" value='2134' /></td> <td>DP-TA-88</td> <td><a href='../PriceList/bigPhoto/DP-TA-88.jpg' class='highslide' onclick='return hs.expand(this)'> <img src='../PriceList/smallPhoto/DP-TA-88.jpg' alt='照片' onerror=this.src='../images/noPhoto.png' onload='ReSizeImage(this,70,70);'></a> </td> <td>2011/9/19<br /><font color="#FF0000">2011/9/19</font><br />剩 -1天</td> <td>如图</td> <td>1</td> <td>0</td> <td>0</td> <td></td> <td></td> <td>世贸其他</td> </tr> </tbody> </table>
浏览器问题么?
table的宽度最好这样设定: width="500" =>style="width:500px;" 浏览器支持反而更高
最好把table也设个width="928"
你有没有发现你在table里边就设置了width宽度,从来就没设置一下高度,当你表格里边显示内容的时候,表格会随着里边的文字、图片而撑大,一旦删除了信息表格又恢复到了原来的大小,你应该固定table和table里边每一个单元格的高度和宽度。
<style type="text/css"> th{height:50px} td{height:100px} </style> </HEAD> <BODY> <div class="tableHeader" style="width:928px;background-color:red">订单回收站</div> <table border="1" class="tablesorter" cellspacing="1" style="word-break:break-all;table-layout:fixed;width:928px"> <thead> <tr> <th style="width:40px;">选择</th> <th style="width:100px;">品名</th> <th style="width:70px;">照片</th> <th style="width:80px;">订货时间</th> <th style="width:90px;">颜色</th> <th style="width:50px;">数量</th> <th style="width:60px;">单价</th> <th style="width:60px;">总价</th> <th style="width:100px;">生产状态</th> <th style="width:100px;">备注</th> <th style="width:80px;">客户</th> </tr> </thead> <tbody> <tr> <td><input name="chk_list" type="checkbox" value='2134' /></td> <td>DP-TA-88</td> <td><a href='../PriceList/bigPhoto/DP-TA-88.jpg' class='highslide' onclick='return hs.expand(this)'> <img src='../PriceList/smallPhoto/DP-TA-88.jpg' alt='照片' onerror=this.src='../images/noPhoto.png' onload='ReSizeImage(this,70,70);'></a> </td> <td>2011/9/19<br /><font color="#FF0000">2011/9/19</font><br />剩 -1天</td> <td>如图</td> <td>1</td> <td>0</td> <td>0</td> <td></td> <td></td> <td>世贸其他</td> </tr> </tbody> </table> </BODY>
前面也有人提到了,div设置了宽度,table也最好设置一下,然后th和td都要设置一个固定的高度,看情况而定。。我给div加了颜色只是为了让你能更清晰的看到div和table的宽度是一样的,待会你删掉就ok了。
Atas ialah kandungan terperinci css中table-layout:fixed为什么表格大小会改变?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!