table表格宽带研究(附带:table表格为什么设置td宽度无效)
情况1:下面代码定义了表格宽带为为600px,未设置td宽带,3个td内容为1,2,3,可以看到3个内容平分table的宽度。
也就是每个td都是200px(请注意:如果用chrome调试宽度,会有一定的误差,因为600px还包括边框,因此实际宽度可能是198px,这里进行了简化,下同)。
1 2 3 4 5 6 7 8 | < table style="width:600px; background-color:red" > < tr > < td >1</ td > < td >2</ td > < td >3</ td > </ tr > </ table > |
接下来,修改第一个td的内容,将1修改为11,则结果变成如下:
因为:第一个单元格的“11”是2个字符宽带,第二个单元格“2”是一个字符宽带,第三个单元格“3”是一个字符宽带。
共计是4个字符宽带,因此,比例为 2:1:1. 所以 第一个单元格是:600*2/4=300px. 第2和第3都是 600*1/4=150px宽度
如果第一个内容过长,默认会称高表的高度,而不是延长表的高度(可以通过在td里放置div来延长宽度,见本文最后),
如下图,表格已经定义为600px,第一个td内容已经大于600px
此时,表格并不会让宽大于600px,td会通过换行来显示td内容。其余各单元格仍然按内容的比例同分table宽度。
下图显示,单元格1和单元格2均分表格剩余宽度。
总之,一个结论:如果不设置td宽带,各单元格会根据各个内容长度的比例来均分table的宽度。
情况2:
定义的表格宽带为600,但是第一和第三的宽度之和已经大于600px了。
此时,系统会先计算第二个实际的宽度,假设第二个是40px,然后第一和第三再按比例均分剩余宽度。
1 2 3 4 5 6 7 8 9 10 11 12 | < table style="width:600px; background-color:blue" > < tr > < td width="400px"> 1 </ td > < td > 222222 </ td > < td width="400px">3</ td > </ tr > </ table > |
情况3:如果td宽度不足,则不足会自动补齐。下图中,第一个100px,第三个200px,第二个td自然是:600-100-200=300px
1 2 3 4 5 6 7 8 9 10 11 12 | < table style="width:600px; background-color:blue" > < tr > < td width="100px"> 1 </ td > < td > 222222 </ td > < td width="200px">3</ td > </ tr > </ table > |
情况4:百分比和数字同时使用,百分比优先级高
1 2 3 4 5 6 7 8 9 10 11 12 | < table style="width:600px; background-color:blue" > < tr > < td width="200px"> 1 </ td > < td width="50%" > 2 </ td > < td width="200px">3</ td > </ tr > </ table > |
上面代码计算td2宽带有两种方法:(1)因为td1是200,td3是200px,td2则是600-200-200=200,在计算50%,则td2的宽带应该是 100px
(2)td2的50%是table的一半,所以,td2的宽带是300. 然后td1和td3按比例1:1均分剩余的300,那么哪个计算是正确的呢?
运行一下,效果如下,第二个方法是正确的。
情况5:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | < table style="width:600px; background-color:blue" > < tr > < td width="100px"> < div style="width:400px"> 1 </ div > </ td > < td > 2 </ td > < td >3</ td > </ tr > </ table > |
虽然td定义的是100px,但是里面的div设置为400px,也就是说,如果td内容是纯文本,超过100px会在td里换行
但是,如果td里div设置了宽度,则会撑宽td的默认值。
结论:td定义的宽带是默认宽度,实际宽度由内容决定。
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· DeepSeek 解答了困扰我五年的技术问题
· 为什么说在企业级应用开发中,后端往往是效率杀手?
· 用 C# 插值字符串处理器写一个 sscanf
· Java 中堆内存和栈内存上的数据分布和特点
· 开发中对象命名的一点思考
· DeepSeek 解答了困扰我五年的技术问题。时代确实变了!
· PPT革命!DeepSeek+Kimi=N小时工作5分钟完成?
· What?废柴, 还在本地部署DeepSeek吗?Are you kidding?
· 赶AI大潮:在VSCode中使用DeepSeek及近百种模型的极简方法
· DeepSeek企业级部署实战指南:从服务器选型到Dify私有化落地
2009-12-12 简单的JAVASCRIPT(JS)音乐播放器