为什么它将宽度样式放在第一个​​或第二个在html表格中/为什么这些表格呈现不同？

Question

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

在代码中的唯一区别是，在fiddle1style="width: 50px;"是该表的第一行中，而在fiddle2它是第二排。但是这会导致每个宽度不同。

根据Chrome开发工具fiddle1两个小区/列具有51px宽度（应该是50px反正），和在fiddle2第一细胞/列具有49px宽度和第二宽度50px。

标记在小提琴1

<table> 
    <tr> 
     <td style="width: 50px;">Test</td> 
     <td style="width: 50px;">Testing 1123455</td> 
    </tr> 
    <tr> 
     <td>AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA</td> 
     <td>B</td> 
    </tr> 
</table> 

标记在小提琴2

<table> 
    <tr> 
     <td>Test</td> 
     <td>Testing 1123455</td> 
    </tr> 
    <tr> 
     <td style="width: 50px;">AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA</td> 
     <td style="width: 50px;">B</td> 
    </tr> 
</table> 

CSS两个小提琴

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

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

Answer 1

也就是说的 '表格的布局：固定' 的魔法。
如此处指定link

table-layout CSS属性指定用于布局单元格，行和列的算法。

当值为'fixed'时：表和列的宽度由table和col元素的宽度或第一行单元格的宽度设置。后续行中的单元格不会影响列宽。

在您的第一个案例中：正如您指定第一行的列的宽度。渲染算法将获取宽度并使用该宽度进行渲染。你看到的额外1px，就是边框宽度。

在第二种情况下：因为没有指定第一行的宽度。它采用表格宽度并尝试调整其中的行列。至于两列将有三个边界，我们留下了97px分为两列。由于像素不能被分成小数，所以您可以获得48px和49px的列宽。额外1px为边界宽度