Wygląda na to, że gdzieś słyszałem / czytałem, że <div>wnętrze a <td>było nie-nie. Nie żeby to nie zadziałało, po prostu coś o tym, że nie są tak naprawdę kompatybilne ze względu na ich typ wyświetlania. Nie mogę znaleźć żadnych dowodów na poparcie mojego przeczucia, więc mogę się całkowicie mylić.
Odpowiedzi:
Używanie divinstide a tdnie jest gorsze niż jakikolwiek inny sposób używania tabel do układu. (Niektórzy ludzie nigdy nie używają tabel do układu, a ja jestem jednym z nich.)
Jeśli użyjesz a divin a td, znajdziesz się w sytuacji, w której może być trudno przewidzieć rozmiar elementów. Domyślnie element div określa jego szerokość na podstawie jego elementu nadrzędnego, a domyślnie komórka tabeli określa jego rozmiar w zależności od rozmiaru zawartości.
Zasady określające, jak divnależy zmieniać rozmiar litery a, są dobrze zdefiniowane w standardach, ale zasady określające, jak tdnależy zmieniać rozmiar litery a, nie są tak dobrze zdefiniowane, dlatego różne przeglądarki używają nieco innych algorytmów.
table-layout:fixedCSS nie jest tym, czym myślisz, że jest. Zmniejsza liczbę obliczeń wykonywanych przez przeglądarki podczas renderowania tabel, ponieważ oblicza tylko rozmiar pierwszego wiersza.
Po sprawdzeniu XHTML DTD odkryłem, że element <TD> może zawierać elementy blokowe, takie jak nagłówki, listy, a także elementy <DIV>. Tak więc użycie elementu <DIV> wewnątrz elementu <TD> nie narusza standardu XHTML. Jestem prawie pewien, że inne współczesne odmiany języka HTML mają równoważny model zawartości dla elementu <TD>.
Oto odpowiednie zasady DTD:
<!ELEMENT td %Flow;>
<!-- %Flow; mixes block and inline and is used for list items etc. -->
<!ENTITY %Flow "(#PCDATA | %block; | form | %inline; | %misc;>
<!ENTITY %block "p | %heading; | div | %lists; | %blocktext; | fieldset | table">Nie, niekoniecznie.
Jeśli potrzebujesz umieścić DIV w TD, upewnij się, że używasz TD prawidłowo. Jeśli nie dbasz o dane tabelaryczne i semantykę, ostatecznie nie będziesz przejmować się DIV w TD. Nie sądzę, że istnieje problem choć - jeśli ma to zrobić, jesteś w porządku.
Zgodnie ze specyfikacją HTML
A <div>można umieścić tam, gdzie oczekuje się zawartości przepływu 1 , czyli <td>modelu treści 2 .
Komórka tabeli może legalnie zawierać elementy blokowe, więc nie jest z natury faux-pas. Wdrożenie przeglądarki pozostawia oczywiście tę spekulatywno-teoretyczną pozycję. Może to powodować problemy z układem i błędy.
Chociaż tabele były używane do układu - a czasami nadal są - wyobrażam sobie, że większość przeglądarek poprawnie wyrenderuje zawartość. Nawet IE.
Jeśli chcesz użyć pozycji: bezwzględna; na div z position: relative;td napotkasz problemy. FF, safari i chrome (ale Mac, nie PC) nie ustawią elementu div względem td (jak można by się spodziewać). Dotyczy to również elementów div z, display: table-whatever;więc jeśli chcesz to zrobić, potrzebujesz dwóch elementów div, jednego dla elementu pojemnik width: 100%; height: 100%;i bez obramowania, więc wypełnia td bez żadnego wizualnego wpływu. a potem absolutna.
poza tym, dlaczego po prostu nie podzielić komórki?
Jak wszyscy wspominali, może to nie być dobry pomysł na potrzeby układu. Doszedłem do tego pytania, ponieważ zastanawiałem się tak samo i chciałem tylko wiedzieć, czy to będzie prawidłowy kod.
Ponieważ jest ważny, możesz go używać do innych celów. Na przykład, zamierzam go użyć, aby umieścić kilka fantazyjnych elementów div "CSSed" w wierszach tabeli, a następnie użyć funkcji szybkiego jQuery, aby umożliwić użytkownikowi sortowanie informacji według ceny, nazwy itp. W ten sposób Jedyną tabelą układu jest „kolejność pionowa”, ale będę kontrolować szerokość, wysokość, tło itp. elementów div według CSS.
Dwa sposoby radzenia sobie z tym
divw tbodytagudivw trtaguOba podejścia są prawidłowe, jeśli widzisz feference: https://stackoverflow.com/a/23440419/2305243
Łamie semantykę , to wszystko. Działa dobrze, ale mogą być czytniki ekranu lub coś, co nie będzie przyjemne w przetwarzaniu twojego HTML, jeśli "złamiesz semantykę".