Colspan todas as colunas

385

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?

Prumo
fonte
A resposta aceita é sobre como NÃO fazer isso, e parece ter graves desvantagens de desempenho / consistência. Então, acho que a resposta é: codifique o número de colunas. Não vejo nenhuma alternativa viável.
Andrew Koster

Respostas:

268

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.

Nahom Tijnam
fonte
Se você especificar um tipo de documento estrito no início do html, o Firefox 3 processará o colspan conforme exigido pelas especificações do html 4.01.
Eineki
253
Sou fã de colspan="42"abranger toda a gama. Obviamente, esse é um problema para mais de 42 colunas, mas é um dos poucos números mágicos que aprovo.
Martin Carney
40
Eu recomendo que você coloque colspan = <número exato exato>. Acabei de acertar um enorme bug de desempenho no Firefox que me levou o dia inteiro para descobrir. Um colspan arbitrariamente grande fará com que o FF engasgue em uma mesa grande com o colapso da borda: colapso. Minha mesa com 800 linhas e 8 colunas estava demorando 5 segundos para renderizar. Com o colspan certo, ele volta a um segundo razoável. bugzilla.mozilla.org/show_bug.cgi?id=675417
InfinitiesLoop
2
Eu recomendo não usar este método. Acabei de obter um resultado muito estranho do Chrome no OSX (colunas sobrepostas).
Tzach
outro problema encontrado no Chrome, se você tentar atribuir uma borda ao elemento TR que contém o TD "de tamanho grande", a borda direita não estará visível.
Massimo
272

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.

Cluxter
fonte
16
Testado [adicionalmente] no IE6 - IE8, Chrome [no PC e Mac], Firefox 4.0 [PC e Mac], Safari 5 [PC e Mac]
hndcrftd
11
Como isso ainda é tão obscuro? Isso deve ser gritado em todas as esquinas !!! Eu estive lutando com esta questão colspan condenado em momentos diferentes para um bom tempo agora
hndcrftd
30
No chrome e no firefox, colspan = "3%" é tratado da mesma forma que colspan = "3".
Zpmorgan 21/05
98
@zpmorgan e @Sprog, você está certo! colspan="100%"significa exatamente colspan="100".
NemoStein 13/09
37
Lol, fiquei muito feliz em finalmente ver uma solução consistente entre navegadores para esse problema, apenas para descobrir pelos comentários que essa é realmente uma enganosa que não funciona como o esperado :( Eu acho que não merece mais votos positivos que a resposta aceita = /
Francisco
64

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>
natevw
fonte
11
Exatamente o que eu estava procurando para colocar controles de paginação na parte inferior de uma tabela de dados. Funciona perfeitamente. Muito obrigado.
Comencau
5
Isso não funciona se você deseja estender todas as colunas no meio de uma tabela ... como agrupar por separador entre grupos relacionados de linhas. (Chrome)
David Hempy
17

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>

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

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

Mark Amery
fonte
4
Haha Eu gosto de como os recursos úteis da API são removidos completamente quando ninguém consegue implementá-los. Processo incrível.
Andrew Koster
14

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 .

George Stocker
fonte
11
A quantidade de colunas pode ser variável, atualizarei minha pergunta para incluir essa observação.
29420 Bob
Embora os conselhos no parágrafo superior pareçam sensatos, acho que muitos dos detalhes aqui não estão certos. A especificação do HTML 3.2 diz que colspans devem ser números inteiros positivos , o que torna colspan=0ilegal; em nenhum lugar dita explicitamente que colspan=0deve ser tratado como colspan=1(embora eu tenha certeza de que é realmente o que o IE 6 faz). Além disso, a citação não está mais (em algum lugar?) Em qualquer lugar da página do fórum ao qual você vincula, e a maioria dos resultados de pesquisa do Google (agora?) São sobre bugs relacionados ao colspan do IE 6 totalmente diferentes .
Mark Amery
11

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.

rainabba
fonte
11
Seria ótimo se você tivesse uma versão JS de baunilha
#
Você tem um caso de uso comum que não possui suporte a $ (seletor) ou simplesmente não deseja usá-lo?
rainabba
11
Nem. Estou curioso para saber se o jQuery adiciona algum benefício aqui; é um pré-requisito bastante robusto e parece que é usado minimamente aqui.
jpaugh
Justo. Entre o jQuery e o Angular, é raro não ter essas ferramentas, por padrão. Vou deixar para outra pessoa a versão baunilha por enquanto.
rainabba
11
Como o jQuery está um pouco desatualizado, adicionei uma versão / resposta do es6 (não queria atualizar essa resposta com código completamente diferente).
Sjeiti
5

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.

Raptor
fonte
colspan = "100" (por exemplo, além do limite) pode causar renderização muito estranho mesa em alguns casos (eu vou tentar caçar alguns casos de teste e postar os URLs)
scunliffe
-1 porque, tanto quanto posso determinar, a afirmação no parágrafo final é falsa. O HTML 4 permite <td>que você tenha colspan="0"(consulte w3.org/TR/REC-html40/struct/tables.html#adef-colspan ), enquanto o HTML 5.0 não permite span="0"um colgroup(consulte w3.org/TR/html50/tabular- data.html # attr-colgroup-span, que afirma que "um valor de atributo de conteúdo de extensão ['s] deve ser um número inteiro não negativo válido maior que zero." ).
Mark Amery
2

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>

Sjeiti
fonte
-1

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;
    }
}
skiwi
fonte
Como a solução JavaScript postada antes desta , isso não generaliza bem; o número de ths não é necessariamente o número de colunas, pois algumas delas podem ter um colspanconjunto e, portanto, isso não funcionará como está escrito para todos.
precisa
-2

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

Eineki
fonte
Concordo com a primeira parte: certamente você pode descobrir quantas células terá na fila? De que outra forma você o geraria?
nickf
13
Não necessariamente, eu tenho um aplicativo com uma tabela gerada dinamicamente AJAX e o número de colunas pode mudar de retorno para retorno. Além disso, ao desenvolver, você pode "conhecer" o número de colunas, mas isso pode mudar e você sabe que vai perder uma delas
Mad Halfling
11
Além disso, se você adicionar colunas mais tarde, poderá esquecer de alterar o colspan, é melhor ter isso sempre no máximo.
Adam
-2

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

FERcsI
fonte
"isso faz parte da especificação desde 4.0" - Não, não exatamente. Ele era parte da especificação, mas esta foi removida em HTML 5 e uma colspande 0 foi feita ilegal. O w3.org/TR/html50/… (a especificação do HTML 5.0) e o html.spec.whatwg.org/multipage/… (o mais recente padrão de vida do WhatWG HTML) afirmam que colspandeve ser maior que zero. E, como observado em outras respostas aqui, os navegadores nunca realmente implementaram o antigo comportamento HTML 4 que você cita.
Mark Amery
-6

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


fonte
4
somente ao usar o IE e configurar via JavaScript e .setAttribute ('colSpan', int); Nota que este foi fixado em IE8 (somente no modo DST)
scunliffe
11
+1 - Eu não sabia disso e foi uma grande ajuda! Eu não acho que o colSpan funcionou no IE6.
mwilcox