COLSPAN todas as colunas

https://stackoverflow.com/questions/398734

29-08-2019
|

Pergunta

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

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

Solução

I têm IE 7,0, 3,0 Firefox e Chrome 1.0

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

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

Isto não funciona quando a propriedade CSS table-layout está definido para fixo.

Mais uma vez, esta não é a solução perfeita, mas parece funcionar nas versões acima mencionadas 3 do navegador quando a propriedade CSS table-layout é automático . Espero que isso ajude.

Outras dicas

Basta usar este:

colspan="100%"

Ele funciona em Firefox 3.6, IE 7 e Opera 11! (E eu acho que em outros, eu não poderia tentar)

Aviso: como mencionado nos comentários abaixo este é realmente o mesmo que colspan="100". Assim, esta solução vai quebrar para tabelas com table-layout: fixed css, ou mais de 100 colunas.

Se você quiser fazer uma célula 'título' que abrange todas as colunas, como cabeçalho para a sua mesa, você pode querer usar a tag caption ( http://www.w3schools.com/tags/tag_caption.asp / https://developer.mozilla.org/en-US/docs/Web/HTML/Element/caption ) este elemento é destinado para esta finalidade . Ele se comporta como um div, mas não abrangem toda a largura do pai da tabela (como um div faria na mesma posição (não tente isso em casa!)), Em vez disso, ele abrange a largura da mesa. Há algumas questões cross-browser com bordas e tal (era aceitável para mim). De qualquer forma, você pode fazê-lo parecer como uma célula que se estende por todas as colunas. Dentro, você pode fazer linhas adicionando div-elementos. Eu não tenho certeza se você pode inseri-lo entre tr-elementos, mas isso seria um hack eu acho que (por isso não é recomendado). Outra opção seria andar com divs flutuantes, mas isso é yuck!

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

Para o IE 6, você vai querer igual colspan para o número de colunas em sua tabela. Se você tem 5 colunas, então você vai querer:. colspan="5"

A razão é que IE alças colspans diferente, ele usa o HTML especificação 3.2:

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

O bug é bem documentada .

Se você estiver usando jQuery (ou não se importa de adicioná-la), isto irá fazer 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 decorar qualquer td / th eu preciso ajustado com uma classe como "MAXCOL" então eu 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 isto não vai funcionar para, não feche a resposta, explicar nos comentários e eu vou atualizar se ele pode ser coberto.

Como uma resposta parcial, a seguir, alguns pontos sobre colspan="0", que foi mencionado na pergunta.

tl; dr versão:

colspan="0" não trabalho em qualquer navegador que seja. W3Schools é errado (como de costume). HTML 4 disse que colspan="0" deve causar uma coluna para abranger toda a tabela, mas ninguém implementou isso e ele foi removido da especificação após HTML 4.

Alguns mais detalhes e evidências:

Todos os principais navegadores tratá-lo como equivalente a colspan="1".

Aqui está uma demonstração com isso; experimentá-lo 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) fez , de fato dizer que colspan="0" deve ser tratado como abrangendo todas as colunas:

Os meios de valor zero ( "0") que os vãos de células todas as colunas da coluna corrente para a última coluna do grupo coluna (COLGROUP) na qual a célula é definido.

No entanto, a maioria dos navegadores não implementou este.
HTML 5.0 (fez uma volta recomendação candidato em 2012), o padrão WhatWG HTML vida (o dominante padrão hoje), e as últimas W3 HTML 5 especificação tudo não contêm o texto citado de HTML 4 acima, e concordam unanimemente que um colspan de 0 não é permitido, com este texto que aparece em todas as três especificações:

Os elementos td e th pode ter um atributo de conteúdo colspan especificado, cujo valor deve ser um maior inteiro não negativo válido que zero ...

Fontes:
Os seguintes reivindicações de página as W3Schools ligados na pergunta são - pelo menos hoje em dia - completamente falso:

Somente Firefox suportes colspan = "0", que tem um significado especial ... [Ele] diz ao navegador para abranger a célula para a última coluna do grupo de coluna (colgroup)

e

Diferenças entre HTML 4.01 e HTML5

NONE.

Se você não estiver ciente de que W3Schools é geralmente desprezado pelos desenvolvedores web para suas imprecisões freqüentes, considere esta uma lição de porquê.

Outro trabalho, mas solução feio: colspan="100", onde 100 é um valor maior do que colunas totais você precisa colspan

De acordo com o W3C, a opção colspan="0" só é válida com tag COLGROUP.

Abaixo está uma solução concisa ES6 (semelhante ao de Rainbabba resposta 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 acrescentar a minha experiência e resposta para isso.
Nota:. Ele só funciona quando você tem um table pré-definido e um tr com ths, mas são de carga em suas fileiras (por exemplo, via AJAX) dinamicamente

Neste caso, você pode contar o número de th de lá estão em sua primeira linha de cabeçalho, e usá-la para abranger toda a coluna.

Isto pode ser necessário quando você quer transmitir uma mensagem quando há resultados foram encontrados.

Algo como isso em jQuery, onde table é a 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;
    }
}

De acordo com o colspan="0" especificação deve resultar em um td width mesa.

No entanto, isto só é verdade se a tabela tem uma largura! A tabela pode conter linhas de larguras diferentes. Assim, o único caso em que o processador sabe a largura da mesa se você definir uma colgroup ! Caso contrário, resultado de colspan = "0" é indeterminável ...

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

Eu não posso testá-lo em navegadores mais antigos, mas isso faz parte da especificação desde 4.0 ...

Talvez eu sou um pensador reta, mas eu estou um pouco confuso, você não sabe o número da coluna de sua tabela?

A propósito IE6 não honra o colspan = "0", com ou sem um colgroup definido. Eu também tentei usar thead e th para gerar os grupos de colunas, mas o navegador não recognlise a forma colspan = "0".

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

Você pode verificar um teste em vários Bowser no

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

Eu encontrei a página de teste aqui http: //hsivonen.iki .fi / test / WA10 / mesas / colspan-0.html

Edit:. Por favor, copie e cole o link, a formatação não vai aceitar as partes duplas protocolo no link (ou eu não sou tão inteligente para formatá-lo corretamente)

Eu tive o mesmo problema - Como eu resolvi meu problema .. Coloque todos os controles que você deseja espaço em um td

tente usar "colspan" em vez de "colspan". IE gosta da versão Camelback ...

Licenciado em: CC-BY-SA com atribuição

Não afiliado a StackOverflow

COLSPAN todas as colunas

tl; dr versão:

Alguns mais detalhes e evidências:

Diferenças entre HTML 4.01 e HTML5