@H_301_1@你能解释为什么这两个HTML代码在渲染时会产生不同的外观吗？ fiddle1和fiddle2
@H_301_1@代码的唯一区别在于fiddle1 style =“width：50px;”在表的第一行,而在fiddle2中,它在第二行.但是这导致每个宽度不同.
@H_301_1@根据Chrome Dev Tools小提琴1,两个单元格/列的宽度均为51px(反正应为50px),而在小提琴2中,第一个单元格/列的宽度为49px,第二个宽度为50px.
@H_301_1@小提琴中的标记1
@H_301_1@
table {
table-layout: fixed;
width: 100px;
}
td {
border: 1px solid black;
overflow: hidden;
}
最佳答案
这就是’table-layout：fixed’的神奇之处.
按照link的规定 @H_301_1@table-layout CSS属性指定用于布置单元格,行和列的算法. @H_301_1@当值为“fixed”时：表和列宽度由table和col元素的宽度或第一行单元格的宽度设置.后续行中的单元格不会影响列宽. @H_301_1@在第一种情况下：为第一行的列指定宽度.渲染算法获取宽度并使用该宽度呈现它.你看到额外的1px,只是边框宽度. @H_301_1@在第二种情况下：由于指定的第一行没有宽度.它占用表格宽度并尝试调整其中的行列.至于两列将有三个边框,我们留下97px在两列之间分配.由于像素不能分为小数,因此列的宽度为48px和49px.额外的1px用于边框宽度
@H_502_46@ 原文链接：https://www.f2er.com/html/425599.html按照link的规定 @H_301_1@table-layout CSS属性指定用于布置单元格,行和列的算法. @H_301_1@当值为“fixed”时：表和列宽度由table和col元素的宽度或第一行单元格的宽度设置.后续行中的单元格不会影响列宽. @H_301_1@在第一种情况下：为第一行的列指定宽度.渲染算法获取宽度并使用该宽度呈现它.你看到额外的1px,只是边框宽度. @H_301_1@在第二种情况下：由于指定的第一行没有宽度.它占用表格宽度并尝试调整其中的行列.至于两列将有三个边框,我们留下97px在两列之间分配.由于像素不能分为小数,因此列的宽度为48px和49px.额外的1px用于边框宽度
