Colspan tutte le colonne

Question

Come posso specificare un tag td dovrebbe estendersi su tutte le colonne (quando l'importo esatto delle colonne della tabella sarà variabili / difficile stabilire quando il codice HTML viene eseguito il rendering)? w3schools menzioni è possibile utilizzare colspan="0", ma non dice esattamente che cosa browser supportano tale valore (IE 6 è nella nostra lista di supporto).

Sembra che l'impostazione colspan ad un valore maggiore rispetto alla quantità teorica di colonne si possono avere funzionerà, ma non funziona se si è impostato su table-layout fixed. Ci sono svantaggi ad usare un layout automatico con un gran numero di colspan? C'è un più corretto modo di fare questo?

Answer 1

Ho IE 7.0, Firefox 3.0 e Chrome 1.0

Il colspan = "0" attributo in un TD è non si estende in tutti i TDs in uno dei browser di cui sopra .

Forse non è raccomandato come corretta pratica markup, ma se si dà un più alto valore colspan rispetto al totale possibile no. di colonne in altre righe , quindi il TD attraverserebbe tutte le colonne.

questo non funziona quando la proprietà table-layout CSS è impostato su fisso.

Ancora una volta, questa non è la soluzione perfetta, ma sembra funzionare nella suddetta 3 versioni del browser quando la proprietà table-layout CSS è automatico . Spero che questo aiuti.

Answer 2

Basta usare questo:

colspan="100%"

Funziona su Firefox 3.6, IE 7 e Opera 11! (E credo che su altri, non ho potuto provare)

---

Attenzione: come accennato nei commenti qui sotto questo è in realtà lo stesso di colspan="100". Quindi, questa soluzione si romperà per le tabelle con css table-layout: fixed, o più di 100 colonne.

Answer 3

Se si vuole fare una cella 'titolo' che attraversa tutte le colonne, come intestazione per il vostro tavolo, si consiglia di utilizzare il tag didascalia ( http://www.w3schools.com/tags/tag_caption.asp / https://developer.mozilla.org/en-US/docs/Web/HTML/Element/caption ) questo elemento è pensato per questo scopo . Si comporta come un div, ma non coprire l'intera larghezza del genitore del tavolo (come un div farebbe nella stessa posizione (non provateci a casa!)), Invece, si estende la larghezza della tavolo. Ci sono alcuni problemi cross-browser con bordi e tale (era accettabile per me). In ogni modo, è possibile farlo sembrare come una cellula che si estende tutte le colonne. All'interno, è possibile effettuare le righe con l'aggiunta di div-elementi. Non sono sicuro se è possibile inserirlo tra TR-elementi, ma che sarebbe un hack Credo che (in modo non raccomandato). Un'altra opzione potrebbe essere nei guai con div galleggianti, ma che è puah!

Do

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

Answer 4

Per IE 6, ti consigliamo di uguale colspan al numero di colonne della tabella. Se si dispone di 5 colonne, allora ti consigliamo:. colspan="5"

Il motivo è che IE gestisce colspans in modo diverso, utilizza il codice HTML specifica 3.2:

  

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

Il bug è bene documentato .

Answer 5

Se stai usando jQuery (o non dispiace aggiungendolo), questo otterrà il lavoro fatto meglio di qualsiasi 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'attuazione, ho decorare qualsiasi td / esimo ho bisogno regolato con una classe come "maxCol" allora posso fare quanto segue:

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

Se si trova un'implementazione questo non funzionerà per, non sbattere la risposta, spiegare nei commenti e io aggiornare se può essere coperto.

Answer 6

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

tl; dr versione:

colspan="0" non funziona in qualsiasi browser di sorta. W3Schools è sbagliato (come al solito). HTML 4 ha detto che colspan="0" dovrebbe causare una colonna per coprire l'intera tabella, ma nessuno implementato questa ed è stato rimosso dal spec dopo HTML 4.

Qualche dettaglio in più e la prova:

• Tutti i browser principali trattano come equivalente a colspan="1".

  Ecco una demo che mostra questo; provarlo 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>

• L'HTML 4 specifica (ormai vecchio e obsoleto, ma torna corrente quando questa domanda è stato chiesto) ha in effetti dire che colspan="0" dovrebbe essere trattata come che copre tutte le colonne:

    

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

  Tuttavia, la maggior parte dei browser non implementati questo.

• HTML 5.0 (fatta una raccomandazione candidato nel 2012), lo standard di WHATWG HTML vita (lo standard dominante di oggi), e l'ultima W3 HTML 5 spec tutti non contengono il testo citato da HTML 4 di cui sopra, e d'accordo all'unanimità che un colspan di 0 non è consentito, con questa formulazione che compare in tutte e tre le specifiche:

    

  Gli elementi td e th possono avere un attributo contenuto colspan specificato, il cui valore deve essere un numero intero non negativo valido 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

• I seguenti crediti da pagina W3Schools collegata alla domanda sono - almeno al giorno d'oggi - completamente falso:

    

  Solo Firefox supporta colspan = "0", che ha un significato speciale ... [E] indica al browser di coprire la cella per l'ultima colonna del gruppo di colonne (colgroup)

  e

    

  Differenze tra HTML 4.01 e HTML5

       

  NONE.

  Se non siete già a conoscenza che W3Schools è generalmente tenuto in disprezzo da parte degli sviluppatori web per le sue imprecisioni frequenti, considerare questo una lezione di perché.

Answer 7

Un altro lavoro ma brutto soluzione:. colspan="100", dove 100 è un valore maggiore di colonne totale è necessario colspan

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

Answer 8

Di seguito è una soluzione ES6 conciso (simile a di Rainbabba risposta ma senza il 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>

Answer 9

Voglio solo aggiungere la mia esperienza e rispondere a questa.
Nota:. Funziona solo quando si ha un table pre-definiti e un tr con ths, ma caricato nel le righe (ad esempio tramite la tecnologia AJAX) in modo dinamico

In questo caso è possibile contare il numero di th del ci sono nel vostro prima riga di intestazione, e l'uso che per coprire l'intera colonna.

Questo può essere necessario quando si vuole trasmettere un messaggio quando sono stati trovati non ha prodotto risultati.

Qualcosa di simile a jQuery, dove table è la vostra 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;
    }
}

Answer 10

In base alla specifica colspan="0" dovrebbe sfociare in un td larghezza della tabella.

Tuttavia, questo è vero solo se la 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 definire un colgroup ! In caso contrario, frutto 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 della specifica dal 4,0 ...

Answer 11

Forse sono un pensatore dritto, ma io sono un po 'perplesso, non si conosce il numero di colonna della tabella?

A proposito IE6 non onora il colspan = "0", con o senza colgroup definito. Ho cercato anche di utilizzare thead e TH per generare i gruppi di colonne, ma il browser non recognlise forma colspan = "0".

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

È possibile controllare un test su diversi Bowser a

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 / tavoli / colspan-0.html

Edit: Si prega di copiare e incollare il link, la formattazione non accetterà le parti doppie di protocollo nel link (o io non sono così intelligente per formattare correttamente)

.

Answer 12

Ho avuto lo stesso problema - Come ho risolto il mio problema .. Mettere tutti i controlli che si desidera abbracciare in un solo td

Answer 13

provare a utilizzare "colspan" invece di "colspan". IE piace la versione camelback ...