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

Can you explain why these two HTML codes result in different look when rendered? fiddle1 and fiddle2

The only difference in the code is that in fiddle1 style="width: 50px;" is in the first row of the table, while in fiddle2 it is in the second row. But this results in different widths for each one.

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

Markup in Fiddle 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>

Markup in Fiddle 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 fiddles

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

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