Colspan todas as colunas

Como especificar que uma tdtag deve abranger todas as colunas (quando a quantidade exata de colunas na tabela será variável / difícil de determinar quando o HTML está sendo renderizado)? O w3schools menciona que você pode usar colspan="0", mas não diz exatamente quais navegadores suportam esse valor (o IE 6 está em nossa lista para suporte).

Parece que a configuração colspanpara um valor maior que a quantidade teórica de colunas que você pode ter funcionará, mas não funcionará se você tiver table-layoutdefinido fixed. Existem desvantagens em usar um layout automático com um número grande para colspan? Existe uma maneira mais correta de fazer isso?

Eu tenho o IE 7.0, Firefox 3.0 e Chrome 1.0

O atributo colspan = "0" em um TD NÃO abrange todos os TDs em qualquer um dos navegadores acima .

Talvez não seja recomendado como prática de marcação adequada, mas se você der um valor maior do colspan do que o total possível não. de colunas em outras linhas , o TD abrangerá todas as colunas.

Isso NÃO funciona quando a propriedade CSS do layout da tabela está definida como fixa.

Mais uma vez, essa não é a solução perfeita, mas parece funcionar nas três versões do navegador acima mencionadas quando a propriedade CSS do layout da tabela é automática . Espero que isto ajude.

Apenas use isto:

colspan="100%"

Funciona no Firefox 3.6, IE 7 e Opera 11! (e eu acho que nos outros, eu não poderia tentar)

Aviso: conforme mencionado nos comentários abaixo, este é realmente o mesmo que colspan="100". Portanto, essa solução será quebrada para tabelas com css table-layout: fixedou mais de 100 colunas.

Se você deseja criar uma célula 'title' que abranja todas as colunas, como cabeçalho da sua tabela, convém usar a tag de legenda ( http://www.w3schools.com/tags/tag_caption.asp / https: // developer.mozilla.org/en-US/docs/Web/HTML/Element/caption) Este elemento foi criado para esse fim. Ele se comporta como uma div, mas não abrange toda a largura do pai da tabela (como uma div faria na mesma posição (não tente fazer isso em casa!)); Em vez disso, abrange a largura do mesa. Existem alguns problemas entre navegadores com bordas e coisas assim (era aceitável para mim). De qualquer forma, você pode fazer com que pareça uma célula que abrange todas as colunas. Dentro, você pode criar linhas adicionando elementos div. Não tenho certeza se você pode inseri-lo entre elementos tr, mas isso seria um hack, eu acho (por isso não é recomendado). Outra opção seria brincar com divs flutuantes, mas isso é eca!

Faz

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

Não

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

Como resposta parcial, aqui estão alguns pontos colspan="0"mencionados na pergunta.

tl; dr versão:

colspan="0"não funciona em nenhum navegador. O W3Schools está errado (como sempre). O HTML 4 disse que isso colspan="0"deve fazer com que uma coluna abranja toda a tabela, mas ninguém implementou isso e ela foi removida da especificação após o HTML 4.

Mais alguns detalhes e evidências:

• Todos os principais navegadores o tratam como equivalente a colspan="1".

  Aqui está uma demonstração mostrando isso; tente em qualquer navegador que você gosta.

  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>

  Executar snippet de códigoOcultar resultados

  Expandir snippet

• O HTML 4 especificação (agora velha e ultrapassada, mas volta actual quando esta pergunta foi feita) foi de fato dizer que colspan="0"deve ser tratado como abrangendo todas as colunas:

  O valor zero ("0") significa que a célula abrange todas as colunas da coluna atual até a última coluna do grupo de colunas (COLGROUP) na qual a célula está definida.

  No entanto, a maioria dos navegadores nunca implementou isso.

• O HTML 5.0 (fez uma recomendação de candidato em 2012), o padrão de vida em HTML do WhatWG (o padrão dominante hoje) e as últimas especificações do HTML 5 do W3 não contêm as palavras citadas no HTML 4 acima e concordam unanimemente que um colspande 0 não é permitido, com esta redação que aparece nas três especificações:

  Os elementos tde thpodem ter um colspanatributo de conteúdo especificado, cujo valor deve ser um número inteiro não negativo válido maior que zero ...

  Fontes:

  • 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

• As seguintes declarações da página do W3Schools vinculadas à pergunta são - pelo menos hoje em dia - completamente falsas:

  Somente o Firefox suporta colspan = "0", que possui um significado especial ... [Diz] ao navegador para estender a célula até a última coluna do grupo de colunas (colgroup)

  e

  Diferenças entre HTML 4.01 e HTML5

  NENHUM.

  Se você ainda não sabe que o W3Schools geralmente é desprezado pelos desenvolvedores da Web por suas imprecisões frequentes, considere esta uma lição do porquê.

Para o IE 6, você deseja igualar colspan ao número de colunas na sua tabela. Se você tem 5 colunas, então você vai querer: colspan="5".

A razão é que IE manipula colspans de maneira diferente, ele usa a especificação HTML 3.2:

O IE implementa a definição HTML 3.2, define colspan=0 como colspan=1.

O bug está bem documentado .

Se você estiver usando jQuery (ou não se importa de adicioná-lo), isso fará o trabalho melhor do que qualquer um desses hacks.

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;

}

Para facilitar a implementação, eu decido qualquer td / é necessário que seja ajustado com uma classe como "maxCol", e posso fazer o seguinte:

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

Se você encontrar uma implementação para a qual não funcionará, não responda, explique nos comentários e eu atualizarei se puder ser coberto.

Outra solução útil, porém feia: em colspan="100"que 100 é um valor maior que o total de colunas, é necessáriocolspan .

De acordo com o W3C, a colspan="0"opção é válida apenas com COLGROUPtag.

Abaixo está uma solução es6 concisa (semelhante à resposta de Rainbabba, mas sem o 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>

Só quero adicionar minha experiência e responder a isso.
Nota: Funciona apenas quando você tem um pré-definido tablee um trcomth s, mas está carregando em suas linhas (por exemplo, por meio de AJAX) dinamicamente.

Nesse caso, você pode contar o número de th 's' existentes na sua primeira linha do cabeçalho e usá-lo para abranger toda a coluna.

Isso pode ser necessário quando você deseja retransmitir uma mensagem quando nenhum resultado foi encontrado.

Algo assim no jQuery, onde tableestá sua tabela de entrada:

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

Talvez eu seja um pensador direto, mas estou um pouco confuso, você não sabe o número da coluna da sua mesa?

A propósito, o IE6 não respeita o colspan = "0", com ou sem um grupo de colunas definido. Tentei também usar thead e th para gerar os grupos de colunas, mas o navegador não reconhece o formulário colspan = "0".

Eu tentei com o Firefox 3.0 no Windows e Linux e ele funciona apenas com um doctype estrito.

Você pode verificar um teste em vários navegadores em

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

Encontrei a página de teste aqui http://hsivonen.iki.fi/test/wa10/tables/colspan-0.html

Editar: copie e cole o link, a formatação não aceitará as partes do protocolo duplo no link (ou não sou tão inteligente para formatá-lo corretamente).

De acordo com a especificação colspan="0"deve resultar em uma largura de tabela td.

No entanto, isso só é verdade se sua tabela tiver uma largura! Uma tabela pode conter linhas de diferentes larguras. Portanto, o único caso em que o representante sabe a largura da tabela se você definir um grupo de colunas ! Caso contrário, o resultado de colspan = "0" é indeterminável ...

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

Não consigo testá-lo em navegadores antigos, mas isso faz parte da especificação desde a versão 4.0 ...

tente usar "colSpan" em vez de "colspan". O IE gosta da versão camelBack ...