Colspan tutte le colonne

Come posso specificare un tdtag dovrebbe estendersi su tutte le colonne (quando la quantità esatta di colonne nella tabella sarà variabile / difficile da determinare quando viene eseguito il rendering dell'HTML)? w3schools menziona che puoi usare colspan="0", ma non dice esattamente quali browser supportano quel valore (IE 6 è nella nostra lista per supportare).

Sembra che l'impostazione colspansu un valore maggiore della quantità teorica di colonne che potresti avere funzionerà, ma non funzionerà se hai table-layoutimpostato su fixed. Ci sono degli svantaggi nell'usare un layout automatico con un numero elevato per colspan? C'è un modo più corretto di farlo?

Ho IE 7.0, Firefox 3.0 e Chrome 1.0

L'attributo colspan = "0" in un TD NON si estende su tutti i TD in nessuno dei browser di cui sopra .

Forse non è raccomandato come pratica di markup corretta, ma se dai un valore colspan più alto del no totale possibile. di colonne in altre righe , quindi il TD si estenderebbe su tutte le colonne.

Questo NON funziona quando la proprietà CSS del layout di tabella è impostata su fissa.

Ancora una volta, questa non è la soluzione perfetta, ma sembra funzionare nelle 3 versioni di browser sopra menzionate quando la proprietà CSS del layout di tabella è automatica . Spero che sia di aiuto.

Usa questo:

colspan="100%"

Funziona su Firefox 3.6, IE 7 e Opera 11! (e suppongo che gli altri, non potrei provare)

Attenzione: come menzionato nei commenti qui sotto questo è in realtà lo stesso di colspan="100". Quindi, questa soluzione si interromperà per le tabelle con CSS table-layout: fixedo più di 100 colonne.

Se si desidera creare una cella "title" che si estende su tutte le colonne, come intestazione per la tabella, è possibile utilizzare il tag caption ( http://www.w3schools.com/tags/tag_caption.asp / https: // developer.mozilla.org/en-US/docs/Web/HTML/Element/caption ) Questo elemento è destinato per questo scopo. Si comporta come un div, ma non si estende su tutta la larghezza del genitore della tabella (come un div farebbe nella stessa posizione (non provarlo a casa!)), Invece, si estende su tutta la larghezza del tavolo. Ci sono alcuni problemi tra browser con bordi e simili (era accettabile per me). Ad ogni modo, puoi farlo sembrare una cella che si estende su tutte le colonne. All'interno, puoi creare righe aggiungendo div-elementi. Non sono sicuro di poterlo inserire tra elementi tr, ma credo che sarebbe un trucco (quindi non consigliato). Un'altra opzione sarebbe quella di fare casini con div galleggianti, ma è schifo!

Fare

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

non

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

Come risposta parziale, ecco alcuni punti su colspan="0", che è stato menzionato nella domanda.

tl; versione dr:

colspan="0"non funziona in nessun browser. W3Schools è sbagliato (come al solito). HTML 4 ha detto questocolspan="0" dovrebbe causare una colonna su tutta la tabella, ma nessuno l'ha implementato ed è stato rimosso dalle specifiche dopo HTML 4.

Qualche dettaglio in più e prove:

• Tutti i principali browser lo considerano equivalente a colspan="1" .

  Ecco una demo che mostra questo; provalo su qualsiasi browser che ti piace.

  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>

  Esegui snippet di codiceHide results

  Espandi frammento

• Le specifiche HTML 4 (ora vecchie e obsolete, ma attuali quando è stata posta questa domanda) hanno effettivamente affermato che colspan="0"dovrebbero essere trattate come su tutte le colonne:

  Il valore zero ("0") indica che la cella si estende su tutte le colonne dalla colonna corrente all'ultima colonna del gruppo di colonne (COLGROUP) in cui è definita la cella.

  Tuttavia, la maggior parte dei browser non lo ha mai implementato.

• HTML 5.0 (fatto una raccomandazione del candidato nel 2012), lo standard di vita HTML WhatWG (lo standard dominante oggi) e le ultime specifiche W3 HTML 5 non contengono tutte le parole citate da HTML 4 sopra e concordano all'unanimità che a colspandi 0 non è consentito, con questa formulazione che appare in tutte e tre le specifiche:

  Gli elementi tde thpossono avere un colspanattributo del contenuto specificato, il cui valore deve essere un numero intero non negativo maggiore di zero ...

  fonti:

  • 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

• Le seguenti affermazioni dalla pagina W3Schools collegate alla domanda sono - almeno al giorno d'oggi - completamente false:

  Solo Firefox supporta colspan = "0", che ha un significato speciale ... [Indica] al browser di estendere la cella all'ultima colonna del gruppo di colonne (colgroup)

  e

  Differenze tra HTML 4.01 e HTML5

  NESSUNA.

  Se non sei già consapevole del fatto che W3Schools è generalmente disprezzato dagli sviluppatori web per le sue frequenti inesattezze, considera questa una lezione sul perché.

Per IE 6, ti consigliamo di eguagliare colspan al numero di colonne nella tabella. Se hai 5 colonne, allora vorrai:colspan="5" .

Il motivo è che IE gestisce i colspan in modo diverso, utilizza la specifica HTML 3.2:

IE implementa la definizione HTML 3.2, imposta colspan=0come colspan=1.

Il bug è ben documentato .

Se stai usando jQuery (o non ti dispiace aggiungerlo), questo farà il lavoro meglio di uno di questi hack.

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;

}

Per facilitare l'implementazione, decoro qualsiasi td / th che devo regolare con una classe come "maxCol", quindi posso fare quanto segue:

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

Se trovi un'implementazione per cui non funzionerà, non sbattere la risposta, spiegare nei commenti e aggiornerò se può essere coperto.

Un'altra soluzione funzionante ma brutta:, colspan="100"dove 100 è un valore maggiore delle colonne totali che è necessario colspan.

Secondo il W3C, l' colspan="0"opzione è valida solo con COLGROUPtag.

Di seguito è una concisa soluzione es6 (simile alla risposta di Rainbabba ma senza 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>

Voglio solo aggiungere la mia esperienza e rispondere a questo.
Nota: funziona solo quando hai un predefinito tablee un trconth s, ma stai caricando dinamicamente le tue righe (ad esempio tramite AJAX).

In questo caso puoi contare il numero di th che ci sono nella tua prima riga di intestazione e usarli per coprire l'intera colonna.

Questo può essere necessario quando si desidera inoltrare un messaggio quando non sono stati trovati risultati.

Qualcosa del genere in jQuery, dove si tabletrova la tabella di input:

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

Forse sono un pensatore diretto ma sono un po 'perplesso, non conosci il numero di colonna del tuo tavolo?

A proposito IE6 non onora colspan = "0", con o senza un colgroup definito. Ho anche provato a usare thead e th per generare i gruppi di colonne ma il browser non riconosce il modulo colspan = "0".

Ho provato con Firefox 3.0 su Windows e Linux e funziona solo con un doctype rigoroso.

Puoi controllare un test su diversi bowser su

http://browsershots.org/http://hsivonen.iki.fi/test/wa10/tables/colspan-0.html

Ho trovato la pagina di test qui http://hsivonen.iki.fi/test/wa10/tables/colspan-0.html

Modifica: copia e incolla il link, la formattazione non accetterà le parti del doppio protocollo nel link (o non sono così intelligente da formattarlo correttamente).

Secondo le specifiche colspan="0"dovrebbe risultare in una tabella td.

Tuttavia, questo è vero solo se la tua tabella ha una larghezza! Una tabella può contenere righe di diverse larghezze. Quindi, l'unico caso in cui il renderer conosce la larghezza della tabella se si definisce un colgroup ! Altrimenti, il risultato di colspan = "0" è indeterminabile ...

http://www.w3.org/TR/REC-html40/struct/tables.html#adef-colspan

Non riesco a testarlo su browser più vecchi, ma questo fa parte delle specifiche dalla 4.0 ...

prova a usare "colSpan" invece di "colspan". Ad IE piace la versione camelBack ...