Czy możesz wyjaśnić, dlaczego te dwa kody HTML przy renderowaniu wyglądają inaczej? fiddle1 i fiddle2Dlaczego jest inny sposób umieszczania stylu szerokości w pierwszym <td> s lub drugim w tabeli html/Dlaczego te tabele renderowane są inaczej?
Jedyna różnica w kodzie jest w fiddle1style="width: 50px;"
znajduje się w pierwszym wierszu tabeli, w fiddle2 to jest w drugim rzędzie. Ale powoduje to różne szerokości dla każdego z nich.
Według Chrome Dev Narzędzia fiddle1 obie komórki/kolumny mają szerokość 51px (powinien być 50px
anyways), w fiddle2 pierwsze komórki/kolumny mają 49px
szerokość i drugą 50px
szerokość.
Markup w 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 w 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 dla obu skrzypce
table {
table-layout: fixed;
width: 100px;
}
td {
border: 1px solid black;
overflow: hidden;
}