Czy DIV wewnątrz TD to zły pomysł?

Wydaje mi się, że gdzieś słyszałem/czytałem, że <div> wewnątrz <td> było Nie-Nie. Nie, że to nie zadziała, tylko coś o tym, że nie są naprawdę kompatybilne w oparciu o ich typ wyświetlacza. Nie mogę znaleźć żadnego dowodu na poparcie mojego przeczucia, więc mogę się całkowicie mylić.

Author: jcollum, 2009-07-10

9 answers

Użycie div instide a td nie jest gorsze niż jakikolwiek inny sposób użycia tabel do układu. (Niektórzy ludzie nigdy nie używają tabel do układu, a ja akurat jestem jednym z nich.)

Jeśli użyjesz div W td znajdziesz się jednak w sytuacji, w której trudno będzie przewidzieć, jak elementy będą miały rozmiar. Domyślnym dla div jest określenie jego szerokości od jego rodzica, a domyślnym dla komórki tabeli jest określenie jej rozmiaru w zależności od rozmiaru jej zawartości.

The reguły rozmiaru div są dobrze zdefiniowane w standardach, ale reguły rozmiaru td nie są tak dobrze zdefiniowane, więc różne przeglądarki używają nieco innych algorytmów.

 150
Author: Guffa,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2014-11-26 15:15:55

Po sprawdzeniu XHTML DTD odkryłem, że

-element może zawierać elementy blokowe, takie jak nagłówki, listy, a także
-elementy. Dlatego używanie elementu
wewnątrz elementu nie narusza standardu XHTML. Jestem prawie pewien, że inne współczesne odmiany HTML mają równoważny model treści dla elementu .

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">
 77
Author: Martin Liversage,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2017-12-13 07:00:32

Nie. Niekoniecznie.

Jeśli chcesz umieścić DIV w TD, upewnij się, że używasz TD prawidłowo. Jeśli nie dbasz o dane tabelaryczne i semantykę, ostatecznie nie dbasz o DIVs w TDs. Nie sądzę jednak, że jest problem - jeśli masz , aby 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> treść model2.

 38
Author: Sampson,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2016-01-25 17:56:23

Komórka tabeli może zgodnie z prawem zawierać elementy na poziomie bloków, więc nie jest z natury sztucznym pasem. Implikacja przeglądarki, oczywiście, pozostawia to stanowisko spekulatywno-teoretyczne. Może to powodować problemy z układem i błędy.

Chociaż ponieważ tabele były używane do układu-a czasami nadal są-wyobrażam sobie, że większość przeglądarek będzie renderować zawartość poprawnie. Nawet IE.

 14
Author: David says reinstate Monica,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2009-07-10 17:37:48

Jeśli chcesz użyć position: absolute; na div z position: relative; Na td napotkasz problemy. FF, safari i chrome (mac, ale nie PC) Nie ustawią div względem td (jak można się spodziewać) jest to również prawdą dla div z display: table-whatever;, więc jeśli chcesz to zrobić, potrzebujesz dwóch div, jednego dla kontenera width: 100%; height: 100%; i nie ma granicy, więc wypełnia td bez żadnego wpływu wizualnego. a potem absolutny.

Poza tym dlaczego po prostu nie rozdzielić komórki?

 13
Author: zeel,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2011-05-25 04:49:46

Miałem do czynienia z problemem umieszczając <div> wewnątrz <td>.

Nie byłem w stanie zidentyfikować div używając document.getElementById() jeśli umieszczę to w td. Ale na zewnątrz działało dobrze.

 3
Author: Himaja,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2011-11-20 02:34:37

Jak wszyscy wspominali, może to nie być dobry pomysł do celów layoutu. Doszedłem do tego pytania, ponieważ zastanawiałem się nad tym samym i chciałem tylko wiedzieć, czy będzie to poprawny kod.

Ponieważ jest ważny, możesz go używać do innych celów. Na przykład, co mam zamiar go używać do umieszczania fantazyjnych" CSSed " divs wewnątrz wierszy tabeli, a następnie użyć szybkiej funkcji jQuery, aby umożliwić użytkownikowi sortowanie informacji według ceny, nazwy itp. W ten sposób jedyny layout jaki mi da to "kolejność pionowa", ale będę kontrolować szerokość, wysokość, tło, itp divs przez CSS.

 1
Author: Juan Ignacio,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2011-07-07 17:27:57

Dwa sposoby radzenia sobie z tym

  1. Umieść div wewnątrz tbody znacznika
  2. Umieść div wewnątrz tr znacznik

Oba podejścia są ważne, jeśli widzisz feference: https://stackoverflow.com/a/23440419/2305243

 0
Author: Alan Dong,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2017-05-23 12:26:08

Łamie semantykę , to wszystko. To działa dobrze, ale mogą być czytniki ekranu lub coś w dół drogi, które nie będą cieszyć przetwarzania HTML, jeśli "złamać semantykę".

 -5
Author: Greg,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2009-07-10 17:37:49