table中td的宽度设置后表现不一致问题

Posted 2023-05-07

table中td的宽度设置后表现不一致,以前一直没发现,如设置td的宽度都为50px,但在浏览器表现出来确不一定..有点大有点小,这是为什么?不指定单位px也一样,请有经验的朋友指教,谢谢!

以下是自己总结出来的，供你参考，如有异议请提出各自的意见。
最终显示table的td宽度决定因素：
1、css(宽度)样式优先级(如外联样式中定义、在<style>标签里面定义、在style=""定义、在td的属性width=""直接定义)
2、宽度大小的单位(px、%、mm[毫米]等)
3、不同浏览器
4、分辨率
5、设置td的宽度大小，与table宽度大小、每一行td宽度直接的关系：
如一个二行三列table宽度设为100%，
第一行第一列td设为30%
第一行第二列td设为30%
第一行第三列td会自动显示为40%(即使你设的不是40%)
(说明td宽度的优先级是从左至右逐渐变低)
第二行第一列td设为20%
第二行第二列td设为20%
第二行第三列td会自动显示为40%(即使你设的不是40%)
(说明td宽度的优先级是从最大至最小逐渐变低，按每列的最大值显示并结合从左至右的原理) 参考技术A 你整体的宽度需要和所有td总和一致，你既然写了像素，那么table的整体就不能用百分比 参考技术B 设置好宽度以后，要写入内容才行的。至少要写个空格在里面，这样子就可以了。比如

IE8 table表格th、td设置宽度的坑

参考技术A 给table的th，td设置固定宽度，并不起作用，内容还是会被撑开，而且不会换行。

这个bug在IE下尤为明显。

如何解决？

在上面css设置下，td的width可以设置固定值也可设置百分比，达到某些列宽度固定，某些列按比例自适应的效果。