为什么在html表中将宽度样式放在第一个或第二个中/为什么这些表

发布时间：2020-12-14 22:39:36 所属栏目：资源来源：网络整理

导读：你能解释为什么这两个HTML代码在渲染时会产生不同的外观吗？ fiddle1 和 fiddle2 代码的唯一区别在于fiddle1 style =“width：50px;”在表的第一行,而在fiddle2中,它在第二行.但是这导致每个宽度不同. 根据Chrome Dev Tools小提琴1,两个单元格/列的宽度均为5

你能解释为什么这两个HTML代码在渲染时会产生不同的外观吗？ fiddle1和fiddle2

代码的唯一区别在于fiddle1 style =“width：50px;”在表的第一行,而在fiddle2中,它在第二行.但是这导致每个宽度不同.

根据Chrome Dev Tools小提琴1,两个单元格/列的宽度均为51px(反正应为50px),而在小提琴2中,第一个单元格/列的宽度为49px,第二个宽度为50px.

小提琴中的标记1


小提琴中的标记2


两个小提琴的CSS

table {
  table-layout: fixed;
  width: 100px;
}

td {
  border: 1px solid black;
  overflow: hidden;
}


最佳答案
这就是’table-layout：fixed’的神奇之处.
按照link的规定
table-layout CSS属性指定用于布置单元格,行和列的算法.
当值为“fixed”时：表和列宽度由table和col元素的宽度或第一行单元格的宽度设置.后续行中的单元格不会影响列宽.
在第一种情况下：为第一行的列指定宽度.渲染算法获取宽度并使用该宽度呈现它.你看到额外的1px,只是边框宽度.
在第二种情况下：由于指定的第一行没有宽度.它占用表格宽度并尝试调整其中的行列.至于两列将有三个边框,我们留下97px在两列之间分配.由于像素不能分为小数,因此列的宽度为48px和49px.额外的1px用于边框宽度
                        （编辑：李大同）
【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!