Colspan wszystkie kolumny


385

Jak mogę określić, że tdznacznik 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 colspanwartości większej niż teoretyczna liczba kolumn, które możesz mieć, zadziała, ale nie zadziała, jeśli table-layoutustawił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?


Przyjęta odpowiedź dotyczy tego, w jaki sposób NIE należy tego robić i wydaje się, że ma poważne wady wydajności / spójności. Wydaje mi się, że odpowiedź brzmi: zakoduj liczbę kolumn. Nie widzę żadnej realnej alternatywy.
Andrew Koster,

Odpowiedzi:


268

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.


Jeśli podasz ścisły typ dokumentu na samym początku html Firefox 3, renderuj colspan zgodnie z wymaganiami specyfikacji html 4.01.
Eineki

253
Jestem fanem 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.
Martin Carney

40
Gorąco polecam wstawienie colspan = <dokładna poprawna liczba>. Właśnie trafiłem na ogromny błąd perf w Firefoksie, który wymyślił cały dzień. Dowolnie duży colspan sprawi, że FF dusi się na dużym stole z border-collapse: collapse. Renderowanie mojej tabeli z 800 wierszami i 8 kolumnami zajęło 5 sekund. Przy odpowiednim rozpiętości colspan wraca do rozsądnej 1 sekundy. bugzilla.mozilla.org/show_bug.cgi?id=675417
InfinitiesLoop

2
Polecam nie używać tej metody. Właśnie uzyskałem bardzo dziwny wynik z Chrome na OSX (nakładające się kolumny).
Tzach,

inny problem wykryty w Chrome, jeśli spróbujesz nadać ramce element TR, który zawiera TD „oversize”, prawa ramka nie będzie widoczna.
Massimo

271

Po prostu użyj tego:

colspan="100%"

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 css table-layout: fixedlub więcej niż 100 kolumnami.


16
Testowane [dodatkowo] w IE6 - IE8, Chrome [na PC i Mac], Firefox 4.0 [PC i Mac], Safari 5 [PC i Mac]
hndcrftd

11
Jak to jest wciąż tak niejasne? To powinno być wykrzykiwane na każdym rogu ulicy !!! Od dłuższego czasu zmagam się z tym przeklętym problemem colspan
hndcrftd

30
W chrome i firefox colspan = „3%” jest obsługiwane tak samo jak colspan = „3”.
zpmorgan

98
@zpmorgan i @Sprog, masz rację! colspan="100%"znaczy dokładnie colspan="100".
NemoStein,

37
Lol, bardzo się ucieszyłem, widząc w końcu spójne rozwiązanie tego problemu dla różnych przeglądarek, ale dzięki komentarzom stwierdziłem, że jest to rzeczywiście zwodnicze, nie działające zgodnie z oczekiwaniami :( Myślę, że nie zasługuje na więcej głosów pozytywnych niż zaakceptowana odpowiedź = /
Francisco

64

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ć

<table>
    <caption style="gimme some style!"><!-- Title of table --></caption>
    <thead><!-- ... --></thead>
    <tbody><!-- ... --></tbody>
</table>

Nie rób

<div>
    <div style="float: left;/* extra styling /*"><!-- Title of table --></div>
    <table>
        <thead><!-- ... --></thead>
        <tbody><!-- ... --></tbody>
    </table>
    <div style="clear: both"></div>
</div>

1
Dokładnie to, czego szukałem, aby umieścić elementy sterujące paginacją na dole pliku danych. Działa idealnie. Dziękuję Ci bardzo.
Comencau,

5
Nie działa to, jeśli chcesz rozciągać wszystkie kolumny na środku tabeli, takie jak grupa po separatorze między powiązanymi grupami wierszy. (Chrome)
David Hempy

17

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ł, że colspan="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.

    td {
      border: 1px solid black;
    }
    <table>
      <tr>
        <td>ay</td>
        <td>bee</td>
        <td>see</td>
      </tr>
      <tr>
        <td colspan="0">colspan="0"</td>
      </tr>
      <tr>
        <td colspan="1">colspan="1"</td>
      </tr>
      <tr>
        <td colspan="3">colspan="3"</td>
      </tr>
      <tr>
        <td colspan="1000">colspan="1000"</td>
      </tr>
    </table>

  • 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:

    Wartość zero („0”) oznacza, że ​​komórka obejmuje wszystkie kolumny od bieżącej kolumny do ostatniej kolumny grupy kolumn (COLGROUP), w której komórka jest zdefiniowana.

    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 colspanz 0 jest niedozwolone, przy takim sformułowaniu, które występuje we wszystkich trzech specyfikacjach:

    Elementy tdi thmogą mieć colspanokreślony atrybut treści, którego wartość musi być prawidłową nieujemną liczbą całkowitą większą niż zero ...

    Ź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:

    Tylko Firefox obsługuje colspan = "0", co ma specjalne znaczenie ... [To] mówi przeglądarce, aby rozciągnęła komórkę na ostatnią kolumnę grupy kolumn (colgroup)

    i

    Różnice między HTML 4.01 i HTML5

    ŻADEN.

    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.


4
Haha Podoba mi się, jak przydatne funkcje API zostały całkowicie usunięte, gdy nikt nie chce ich wdrożyć. Niesamowity proces.
Andrew Koster,

14

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:

IE implementuje definicję HTML 3.2, ustawia colspan=0jako colspan=1.

Błąd jest dobrze udokumentowany .


1
Liczba kolumn może być zmienna, zaktualizuję moje pytanie, aby uwzględnić tę uwagę.
Bob

Chociaż porady w pierwszym akapicie wydają się rozsądne, uważam, że wiele szczegółów tutaj nie jest do końca poprawnych. Specyfikacja HTML 3.2 mówi, że colspans muszą być dodatnimi liczbami całkowitymi, co czyni colspan=0nielegalnym; nigdzie nie jest to jednoznacznie narzucone, że colspan=0powinno 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.
Mark Amery

11

Jeśli używasz jQuery (lub nie masz nic przeciwko dodaniu go), zadanie to zostanie wykonane lepiej niż którykolwiek z tych hacków.

function getMaxColCount($table) {
    var maxCol = 0;

    $table.find('tr').each(function(i,o) {
        var colCount = 0;
        $(o).find('td:not(.maxcols),th:not(.maxcols)').each(function(i,oo) {
            var cc = Number($(oo).attr('colspan'));
            if (cc) {
                colCount += cc;
            } else {
                colCount += 1;
            }
        });
        if(colCount > maxCol) { maxCol = colCount };
    });

    return maxCol;

}

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:

$('td.maxcols, th.maxcols').each(function(i,o) {
    $t = $($(o).parents('table')[0]); $(o).attr('colspan',  getMaxColCount($t));
});

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ć.


1
Byłoby wspaniale, gdybyś miał waniliową wersję JS
jpaugh

Czy masz typowy przypadek użycia, który nie obsługuje $ (selektora), czy po prostu nie chcesz go używać?
rainabba

1
Ani. Jestem tylko ciekawy, czy jQuery dodaje tu jakieś korzyści; jest to dość spory warunek wstępny i wygląda na to, że jest tu tylko minimalnie używany.
jpaugh

Słusznie. Pomiędzy jQuery i Angular, rzadko mam takie narzędzia, więc domyślnie je używam. Jednak pozostawiam to komuś innemu, aby opracował wersję waniliową.
rainabba

1
Ponieważ jQuery jest nieco przestarzałe, dodałem wersję / odpowiedź es6 (nie chciałem aktualizować tej odpowiedzi za pomocą zupełnie innego kodu).
Sjeiti

5

Kolejne działające, ale brzydkie rozwiązanie: colspan="100"gdzie 100 jest wartością większą niż całkowita liczba kolumn, której potrzebujesz colspan.

Zgodnie z W3C colspan="0"opcja jest ważna tylko z COLGROUPtagiem.


colspan = "100" (np. poza limitem) może w niektórych przypadkach powodować bardzo dziwne renderowanie tabel (postaram się wyśledzić niektóre przypadki testowe i opublikować adresy URL)
scunliffe

-1, ponieważ o ile mogę ustalić, roszczenie w ostatnim akapicie jest fałszywe. HTML 4 pozwala na <td>s colspan="0"(patrz w3.org/TR/REC-html40/struct/tables.html#adef-colspan ), podczas gdy HTML 5.0 nie pozwala span="0"na colgroup(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.” ).
Mark Amery

2

Poniżej znajduje się zwięzłe rozwiązanie es6 (podobne do odpowiedzi Rainbabba, ale bez jQuery).

Array.from(document.querySelectorAll('[data-colspan-max]')).forEach(td => {
    let table = td;
    while (table && table.nodeName !== 'TABLE') table = table.parentNode;
    td.colSpan = Array.from(table.querySelector('tr').children).reduce((acc, child) => acc + child.colSpan, 0);
});
html {
  font-family: Verdana;
}
tr > * {
  padding: 1rem;
  box-shadow: 0 0 8px gray inset;
}
<table>
<thead>
  <tr>
    <th>Header 1</th>
    <th>Header 2</th>
    <th>Header 3</th>
    <th>Header 4</th>
    <th>Header 5</th>
    <th>Header 6</th>
  </tr>
</thead>
<tbod><tr>
  <td data-colspan-max>td will be set to full width</td>
</tr></tbod>
</table>


-1

Chcę tylko dodać moje doświadczenie i odpowiedzieć na to.
Uwaga: To działa tylko wtedy, gdy trzeba wstępnie zdefiniowane tablei trze ths, ale wkładanego swoich wierszy (na przykład za pośrednictwem AJAX) dynamicznie.

W takim przypadku możesz policzyć liczbę thpierwszych 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 tablejest twoja tabela wejściowa:

var trs = $(table).find("tr");
var numberColumns = 999;
if (trs.length === 1) {
    //Assume having one row means that there is a header
    var headerColumns = $(trs).find("th").length;
    if (headerColumns > 0) {
        numberColumns = headerColumns;
    }
}

Podobnie jak w przypadku opublikowanego wcześniej rozwiązania JavaScript , nie uogólnia się ono dobrze; liczba ths niekoniecznie jest liczbą kolumn, ponieważ niektóre z nich mogą mieć colspanzestaw, więc nie będzie to działać tak, jak napisano dla wszystkich.
Mark Amery

-2

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ć).


Zgadzam się co do pierwszej części: na pewno możesz dowiedzieć się, ile komórek będziesz mieć w rzędzie? Jak inaczej byś to wygenerował?
nickf

13
Niekoniecznie mam aplikację z dynamicznie generowaną tabelą AJAX, a liczba kolumn może się zmieniać z oddzwaniania na oddzwanianie. Ponadto podczas opracowywania możesz „znać” liczbę kolumn, ale może się to zmienić i po prostu wiesz , że przegapisz jedną z nich
Mad Halfling

11
Dodatkowo, jeśli dodasz kolumny później, możesz zapomnieć o zmianie zasięgu, lepiej mieć to zawsze na poziomie max.
Adam

-2

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 ...


„jest to część specyfikacji od 4.0” - Nie, nie do końca. Było to częścią specyfikacji, ale zostało to usunięte w HTML 5 i a colspanz 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) colspanmuszą być większe od zera. I jak zauważono w innych odpowiedziach tutaj, przeglądarki nigdy nie implementowały starego cytowanego zachowania HTML 4.
Mark Amery

-6

spróbuj użyć „colSpan” zamiast „colspan”. IE lubi wersję camelBack ...


4
tylko przy korzystaniu z IE i ustawianiu przez JavaScript i .setAttribute ('colSpan', int); Uwaga: zostało to naprawione w IE8 (tylko w trybie stds)
scunliffe

1
+1 - nie wiedziałem o tym i to była ogromna pomoc! Nie sądziłem, że colSpan działa nawet w IE6.
mwilcox,
Korzystając z naszej strony potwierdzasz, że przeczytałeś(-aś) i rozumiesz nasze zasady używania plików cookie i zasady ochrony prywatności.
Licensed under cc by-sa 3.0 with attribution required.