Stała szerokość pierwszej tabeli tabeli

Question

Mam podstawowy stół z przewijanym ciałem. Robiąc to musiałem ustawić wyświetlanie thead i tbody: block i ustawiłem również szerokość dla th i td.

Z jakiegoś powodu pierwsza kolumna th nie jest wyrównana z pierwszą kolumną tds. Czy ktoś może mi powiedzieć, jakie są tego przyczyny?

CSS

thead, 
tbody { 
    display: block; 
} 

thead { 
    text-align: left; 
} 

tbody { 
    background: yellow; 
    overflow-y: auto; 
    height: 6em; 
} 

thead th, 
tbody td { 
    width: 4em; 
    padding: 2px; 
} 

thead tr th:first-child, 
tbody tr td:first-child { 
    width: 8em; 
    background: salmon; 
    font-weight: normal; 
} 

Oto Fiddle

Answer 1

Szerokość prpoerty dla DIV & TABLE s działa różnie.

Zastosowanie max-width & min-width aby osiągnąć pożądane wyniki:

thead tr th:first-child, 
tbody tr td:first-child { 
    width: 8em; 
    min-width: 8em; 
    max-width: 8em; 
    word-break: break-all; 
} 

Edit:

(Edycja odpowiedź wyjaśnić funkcjonowanie szerokości w HTML, należy podkreślić, gdybym coś coś złego lub brakowało!)

Właściwość szerokości div służy do definiowania s ize elementu & treść jest dopasowana odpowiednio, niezależnie od rodzica & szerokości rodzeństwa.

Ale w przypadku tabeli, wielkość elementu jest obliczana zgodnie z zawartością, & właściwość width ma niższy priorytet. Uwzględniany jest nawet rozmiar rodzeństwa. Dlatego musimy użyć dodatkowych właściwości, takich jak min-width & max-width, aby wymusić pożądany rozmiar!

Answer 2

usunąć pierwszą zasadę styl: display: block z TBODY i thead

Dzięki temu jesteś nadrzędnego formatowanie tabel i układ wyświetlający: tabela udostępnia

thead, 
tbody { 
// display: block; 
} 

Fixed