Why is it different from the width style in the first <td> s or the second in the html table / Why are these tables displayed differently?

Question

Can you explain why these two HTML codes give a different look when rendering? fiddle1 and fiddle2

The only difference in the code is that in fiddle1 style="width: 50px;" located in the first row of the table, and in the violin2 - in the second row. But this leads to a different width for each of them.

According to Chrome Dev Tools fiddle1, both cells / columns are 51px wide (should be 50px anyway), and in fiddle2, the first cells / columns are 49px wide and the second 50px .

Script markup 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> 

Script markup 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 for both scripts

 table { table-layout: fixed; width: 100px; } td { border: 1px solid black; overflow: hidden; } 

Answer 1

This is the magic of "table-layout: fixed".
As indicated in the link

The CSS property of the layout table determines the algorithm used to arrange cells, rows, and columns.

When the value is "fixed": the width of the table and column is set by the width of the table and column elements or the width of the first row of cells. The cells in the following rows do not affect the width of the columns.

In your first case : as you specified the width for the columns of the first row. The rendering algorithm takes a width and displays it with that width. The extra 1px you see is just the width of the border.

In the second case : since the width for the first line is not specified. It takes the width of the table and tries to adjust the columns of rows in it. As for the two columns, there will be three borders, we are left with 97px, which will be divided between the two columns. Since the pixel cannot be divided into decimal numbers, you get 48px and 49px column widths. extra 1px - for border width