Colspan wszystkie kolumny

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?

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.

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.

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>

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>

  Uruchom fragment koduUkryj wyniki

  Rozwiń fragment kodu

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

  • https://www.w3.org/TR/html50/tabular-data.html#attributes-common-to-td-and-th-elements
  • https://html.spec.whatwg.org/multipage/tables.html#attributes-common-to-td-and-th-elements
  • https://www.w3.org/TR/html53/tabular-data.html#attributes-common-to-td-and-th-elements

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

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 .

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

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.

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>

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;
    }
}

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

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

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