2017-08-05 61 views
5

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; 
} 

Odpowiedz

3

To jest magia 'table-układ: fixed'.
Jak podano w tej link

Właściwość CSS układu tabeli określa algorytm używany do rozmieszczania komórek, wierszy i kolumn.

Gdy wartość jest "ustalona": Szerokość tabeli i kolumny są ustalane przez szerokości elementów tabeli i col lub przez szerokość pierwszego wiersza komórek. Komórki w kolejnych wierszach nie mają wpływu na szerokości kolumn.

W pierwszym przypadku: Jak określono szerokość dla kolumn pierwszego rzędu. Algorytm renderowania przyjmuje szerokość i renderuje ją z tą szerokością. Dodatkowy 1 piksel to szerokość obramowania.

W drugim przypadku: Ponieważ nie określono szerokości pierwszego wiersza. Zajmuje szerokość stołu i próbuje dopasować kolumny w nim. Jeśli chodzi o dwie kolumny, to będą trzy granice, które opuściliśmy, a 97px zostanie podzielone między dwie kolumny. Ponieważ piksel nie może być podzielony na dziesiętne, otrzymujesz szerokość kolumn 48px i 49px. dodatkowy 1px jest dla szerokości obramowania