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了。
以上是css中table-layout:fixed为什么表格大小会改变?的详细内容。更多信息请关注PHP中文网其他相关文章!

热AI工具

Undresser.AI Undress
人工智能驱动的应用程序,用于创建逼真的裸体照片

AI Clothes Remover
用于从照片中去除衣服的在线人工智能工具。

Undress AI Tool
免费脱衣服图片

Clothoff.io
AI脱衣机

AI Hentai Generator
免费生成ai无尽的。

热门文章

热工具

记事本++7.3.1
好用且免费的代码编辑器

SublimeText3汉化版
中文版,非常好用

禅工作室 13.0.1
功能强大的PHP集成开发环境

Dreamweaver CS6
视觉化网页开发工具

SublimeText3 Mac版
神级代码编辑软件(SublimeText3)

这是我们在形式可访问性上进行的小型系列中的第三篇文章。如果您错过了第二篇文章,请查看“以:focus-visible的管理用户焦点”。在

本教程演示了使用智能表单框架创建外观专业的JavaScript表单(注意:不再可用)。 尽管框架本身不可用,但原理和技术仍然与其他形式的建筑商相关。

CSS盒子阴影和轮廓属性获得了主题。让我们查看一些在真实主题中起作用的示例,以及我们必须将这些样式应用于WordPress块和元素的选项。

构建内联文本编辑器并不是微不足道的。 该过程首先要使目标元素可编辑,并在此过程中处理潜在的语法异常。 创建您的编辑器 要构建此编辑器,您需要动态修改内容

Svelte Transition API提供了一种使组件输入或离开文档(包括自定义Svelte Transitions)时动画组件的方法。

该教程通过使用node.js,express和multer构建文件上传系统来指导您。 我们将介绍单个和多个文件上传,甚至演示在MongoDB数据库中存储图像以进行以后的检索。 首先,设置您的projec

本文探讨了Envato Market上可用的PHP表单构建器脚本,比较了其功能,灵活性和设计。 在研究特定选项之前,让我们了解PHP形式构建器是什么以及为什么要使用一个。 PHP形式
