Jak mogę określić, że td
znacznik powinien obejmować wszystkie kolumny (kiedy dokładna liczba kolumn w tabeli będzie zmienna / trudno określić, kiedy renderowany jest HTML)? w3schools wspomina, że możesz użyć colspan="0"
, ale nie mówi dokładnie, jakie przeglądarki obsługują tę wartość (IE 6 jest na naszej liście do obsługi).
Wygląda na to, że ustawienie colspan
wartości większej niż teoretyczna liczba kolumn, które możesz mieć, zadziała, ale nie zadziała, jeśli table-layout
ustawiłeś opcję fixed
. Czy są jakieś wady korzystania z automatycznego układu z dużą liczbą colspan
? Czy istnieje bardziej poprawny sposób na zrobienie tego?
Odpowiedzi:
Mam IE 7.0, Firefox 3.0 i Chrome 1.0
Atrybut colspan = "0" w TD NIE obejmuje wszystkich TD w żadnej z powyższych przeglądarek .
Może nie jest to zalecane jako właściwa praktyka znaczników, ale jeśli podasz wyższą wartość colspan niż całkowita możliwa nie. kolumn w innych wierszach , TD objąłby wszystkie kolumny.
To NIE działa, gdy właściwość CSS układu tabeli jest ustawiona na stałą.
Po raz kolejny nie jest to idealne rozwiązanie, ale wydaje się działać w wyżej wymienionych 3 wersjach przeglądarki, gdy właściwość CSS układu tabeli jest automatyczna . Mam nadzieję że to pomoże.
źródło
colspan="42"
rozciągania się na cały zakres. Jest to oczywiście problem dla> 42 kolumn, ale jest to jedna z niewielu magicznych liczb, które zatwierdzam.Po prostu użyj tego:
Działa na Firefox 3.6, IE 7 i Opera 11! (i chyba na innych, nie mogłem spróbować)
Ostrzeżenie: jak wspomniano w komentarzach poniżej, w rzeczywistości jest to to samo co
colspan="100"
. Dlatego to rozwiązanie zostanie zepsute dla tabel z csstable-layout: fixed
lub więcej niż 100 kolumnami.źródło
colspan="100%"
znaczy dokładniecolspan="100"
.Jeśli chcesz utworzyć komórkę „tytułową” obejmującą wszystkie kolumny, jako nagłówek tabeli, możesz użyć tagu podpisu ( http://www.w3schools.com/tags/tag_caption.asp / https: // developer.mozilla.org/en-US/docs/Web/HTML/Element/caption) Ten element jest przeznaczony do tego celu. Zachowuje się jak div, ale nie obejmuje całej szerokości elementu nadrzędnego tabeli (tak jak div zrobiłby to w tej samej pozycji (nie próbuj tego w domu!)), Zamiast tego obejmuje szerokość stół. Istnieją pewne problemy z ramkami w różnych przeglądarkach i takie (było to dla mnie akceptowalne). W każdym razie możesz sprawić, że będzie wyglądać jak komórka obejmująca wszystkie kolumny. Wewnątrz możesz tworzyć rzędy, dodając elementy div. Nie jestem pewien, czy możesz wstawić go między tr-elementy, ale chyba byłby to hack (więc nie jest to zalecane). Inną opcją byłoby mieszanie się z pływającymi divami, ale to fuj!
Zrobić
Nie rób
źródło
Jako częściową odpowiedź, oto kilka punktów na temat
colspan="0"
, o których wspomniano w pytaniu.wersja tl; dr:
colspan="0"
nie działa w żadnej przeglądarce. W3Schools jest zły (jak zwykle). HTML 4 powiedział, żecolspan="0"
powinno to spowodować, że kolumna obejmie całą tabelę, ale nikt tego nie zaimplementował i został on usunięty ze specyfikacji po HTML 4.Więcej szczegółów i dowodów:
Wszystkie główne przeglądarki traktują to jako odpowiednik
colspan="1"
.Oto demo pokazujące to; wypróbuj w dowolnej przeglądarce.
HTML 4 Spec (obecnie stare i przestarzałe, ale prąd z powrotem, kiedy to pytano) było rzeczywiście powiedzieć , że
colspan="0"
powinny być traktowane jako obejmujące wszystkie kolumny:Jednak większość przeglądarek nigdy tego nie implementowała.
HTML 5.0 (zalecenie dla kandydata w 2012 r.), Standard życia WhatWG HTML (obecnie dominujący standard) oraz najnowsza specyfikacja W3 HTML 5 nie zawierają sformułowania cytowanego w HTML 4 powyżej i jednogłośnie zgadzają się, że a
colspan
z 0 jest niedozwolone, przy takim sformułowaniu, które występuje we wszystkich trzech specyfikacjach:Źródła:
Następujące twierdzenia ze strony W3Schools, do której odsyłają pytania, są - przynajmniej w dzisiejszych czasach - całkowicie fałszywe:
i
Jeśli jeszcze nie wiesz, że twórcy stron internetowych zlekceważyli W3Schools z powodu częstych nieścisłości, zastanów się nad tym, dlaczego tak jest.
źródło
W przypadku IE 6 będziesz chciał równać colspan z liczbą kolumn w tabeli. Jeśli masz 5 kolumn, a następnie będziemy chcieli:
colspan="5"
.Powodem jest to, że IE inaczej obsługuje colspany , używa specyfikacji HTML 3.2:
Błąd jest dobrze udokumentowany .
źródło
colspan
s muszą być dodatnimi liczbami całkowitymi, co czynicolspan=0
nielegalnym; nigdzie nie jest to jednoznacznie narzucone, żecolspan=0
powinno się z tym postępowaćcolspan=1
(chociaż jestem pewien, że tak właśnie robi IE 6). Ponadto cytat nie jest (już?) Nigdzie na stronie forum, do której prowadzi link, a większość wyników wyszukiwania Google (teraz?) Dotyczy całkowicie różnych błędów związanych z kolspanem w IE 6.Jeśli używasz jQuery (lub nie masz nic przeciwko dodaniu go), zadanie to zostanie wykonane lepiej niż którykolwiek z tych hacków.
Aby ułatwić implementację, dekoruję dowolne td / th, które muszę dostosować za pomocą klasy takiej jak „maxCol”, a następnie mogę wykonać następujące czynności:
Jeśli znajdziesz implementację, dla której to nie zadziała, nie zatrzaskuj odpowiedzi, wyjaśnij w komentarzach, a ja zaktualizuję, czy można to uwzględnić.
źródło
Kolejne działające, ale brzydkie rozwiązanie:
colspan="100"
gdzie 100 jest wartością większą niż całkowita liczba kolumn, której potrzebujeszcolspan
.Zgodnie z W3C
colspan="0"
opcja jest ważna tylko zCOLGROUP
tagiem.źródło
<td>
scolspan="0"
(patrz w3.org/TR/REC-html40/struct/tables.html#adef-colspan ), podczas gdy HTML 5.0 nie pozwalaspan="0"
nacolgroup
(patrz w3.org/TR/html50/tabular- data.html # attr-colgroup-span, który stwierdza, że „wartość atrybutu zawartości zakresu musi być prawidłową nieujemną liczbą całkowitą większą od zera.” ).Poniżej znajduje się zwięzłe rozwiązanie es6 (podobne do odpowiedzi Rainbabba, ale bez jQuery).
źródło
Chcę tylko dodać moje doświadczenie i odpowiedzieć na to.
Uwaga: To działa tylko wtedy, gdy trzeba wstępnie zdefiniowane
table
itr
zeth
s, ale wkładanego swoich wierszy (na przykład za pośrednictwem AJAX) dynamicznie.W takim przypadku możesz policzyć liczbę
th
pierwszych wierszy nagłówka i użyć ich do objęcia całej kolumny.Może to być potrzebne, gdy chcesz przekazać komunikat, gdy nie znaleziono żadnych wyników.
Coś takiego w jQuery, gdzie
table
jest twoja tabela wejściowa:źródło
th
s niekoniecznie jest liczbą kolumn, ponieważ niektóre z nich mogą miećcolspan
zestaw, więc nie będzie to działać tak, jak napisano dla wszystkich.Może jestem prostym myślicielem, ale jestem trochę zdziwiony, nie znasz numeru kolumny swojego stołu?
Nawiasem mówiąc, IE6 nie honoruje colspan = "0", ze zdefiniowaną grupą colg lub bez. Próbowałem także użyć thead i th do wygenerowania grup kolumn, ale przeglądarka nie rozpoznaje formy colspan = "0".
Próbowałem z Firefoksem 3.0 na Windows i Linux i działa tylko ze ścisłym typem dokumentu.
Możesz sprawdzić test na kilku Bowser na
http://browsershots.org/http://hsivonen.iki.fi/test/wa10/tables/colspan-0.html
Znalazłem stronę testową tutaj http://hsivonen.iki.fi/test/wa10/tables/colspan-0.html
Edycja: skopiuj i wklej link, formatowanie nie zaakceptuje części podwójnego protokołu w linku (lub nie jestem zbyt mądry, aby poprawnie sformatować).
źródło
Zgodnie ze specyfikacją
colspan="0"
powinna mieć szerokość tabeli td.Jest to jednak prawdą tylko wtedy, gdy twój stół ma szerokość! Tabela może zawierać wiersze o różnych szerokościach. Więc jedyny przypadek, w którym moduł renderujący zna szerokość tabeli, jeśli zdefiniujesz grupę colgroup ! W przeciwnym razie wynik colspan = "0" jest nieokreślony ...
http://www.w3.org/TR/REC-html40/struct/tables.html#adef-colspan
Nie mogę go przetestować na starszych przeglądarkach, ale jest to część specyfikacji od 4.0 ...
źródło
colspan
z 0 zostało uznane za nielegalne. Zarówno w3.org/TR/html50/… (specyfikacja HTML 5.0), jak i html.spec.whatwg.org/multipage/… (najnowszy standard WhatWG HTML Living Standard)colspan
muszą być większe od zera. I jak zauważono w innych odpowiedziach tutaj, przeglądarki nigdy nie implementowały starego cytowanego zachowania HTML 4.spróbuj użyć „colSpan” zamiast „colspan”. IE lubi wersję camelBack ...
źródło