Colspan todas las columnas

https://stackoverflow.com/questions/398734

29-08-2019
|

Pregunta

¿Cómo puedo especificar una etiqueta td debe abarcar todas las columnas (cuando la cantidad exacta de las columnas de la tabla será variable / difícil determinar cuándo se está representando el HTML)? w3schools menciones puede utilizar colspan="0", pero no dice exactamente qué navegadores son compatibles con ese valor (IE 6 está en nuestra lista de apoyo).

Parece que la fijación de colspan a un valor mayor que la cantidad teórica de columnas que tenga va a funcionar, pero no va a funcionar si se ha ajustado a table-layout fixed. ¿Hay algunas desventajas en el uso de un diseño automático con un gran número de colspan? ¿Hay una manera más correcta de hacer esto?

Solución

Tengo IE 7.0, Firefox 3.0 y Chrome 1.0

La = "0" atributo colspan en un TD es NO abarca en todas las anotaciones en cualquiera de los navegadores anteriores .

Tal vez no se recomienda como una práctica adecuada de marcado, pero si se le da una colspan mayor valor que el total sea posible ninguna. de columnas en otras filas y el TD abarcaría todas las columnas.

Esto no funciona cuando la propiedad de mesa de diseño CSS está configurado como fijo.

Una vez más, esto no es la solución perfecta, pero parece que funciona en el anteriormente mencionado 3 versiones del navegador cuando la propiedad de mesa de diseño CSS es automática . Espero que esto ayude.

Otros consejos

Sólo tiene que utilizar la siguiente:

colspan="100%"

Funciona en Firefox 3.6, Internet Explorer 7 y Opera 11! (Y supongo que en otros, no pude probar)

Advertencia: como se ha mencionado en los comentarios debajo de este es en realidad el mismo que colspan="100". Por lo tanto, esta solución se romperá para tablas con table-layout: fixed css, o más de 100 columnas.

Si desea hacer una célula de 'título' que se extiende por todas las columnas, como cabecera de la mesa, es posible que desee utilizar la etiqueta del subtítulo ( http://www.w3schools.com/tags/tag_caption.asp / https://developer.mozilla.org/en-US/docs/Web/HTML/Element/caption ) este elemento está destinado para este fin . Se comporta como un div, pero no abarca toda la anchura del padre de la tabla (como un div haría en la misma posición (no intente esto en casa!)), En cambio, se extiende por todo el ancho de la mesa. Hay algunos problemas entre navegadores con bordes y tal (es aceptable para mí). De todas formas, puede hacer que se vea como una celda que abarca todas las columnas. Dentro, se puede hacer mediante la adición de filas DIV-elementos. No estoy seguro de si se puede insertar en el medio tr-elementos, pero eso sería un truco que supongo (por lo que no se recomienda). Otra opción sería jugar un poco con divs flotantes, pero eso es yuck!

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

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

Para IE 6, que querrá igual colspan al número de columnas de la tabla. Si usted tiene 5 columnas, entonces usted querrá:. colspan="5"

La razón es que IE maneja colspans diferente, utiliza la especificación HTML 3.2:

IE implementa la definición de HTML 3.2, se establece como colspan=0 colspan=1.

El error es así documentado.

Si estás usando jQuery (o no les importa que la adición), esto va a hacer el trabajo mejor que cualquiera de estos cortes.

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 la implementación, que decorar cualquier td / th necesito ajustar con una clase como "máxCol" entonces puedo hacer lo siguiente:

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

Si encuentra una aplicación, esto no funcionará para, NO cierre la respuesta, explique en los comentarios y voy a actualizar si se puede cubrir.

Como respuesta parcial, aquí hay algunos puntos sobre colspan="0", que se mencionó en la pregunta.

tl; dr versión:

colspan="0" no funciona en cualquier navegador que sea. W3Schools está mal (como de costumbre). HTML 4 dice que colspan="0" debería provocar una columna para abarcar toda la mesa, pero nadie implementado este y fue retirado de la especificación después de HTML 4.

Algunos más detalles y pruebas:

Todos los principales navegadores tratan como equivalente a colspan="1".

Esta es una prueba donde se muestran esto; probarlo en cualquier navegador que te gusta.

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>

La especificación HTML 4 (ahora viejo y anticuado, pero de vuelta actual cuando se hizo esta pregunta) hizo de hecho decir que colspan="0" debe ser tratado como que abarca todas las columnas:

El valor cero ( "0") significa que la célula se extiende por todas las columnas de la columna actual a la última columna de la grupo de columnas (COLGROUP) en la que se define la célula.

Sin embargo, la mayoría de los navegadores no implementan esto.
HTML 5.0 (hizo una recomendación candidata de nuevo en 2012), el estándar WhatWG HTML estar (el estándar dominante en la actualidad), y la última especificación W3 HTML 5 todo no contienen el texto citado de HTML 4 anterior, y acuerdan por unanimidad que no se permite que un colspan de 0, con esta palabra que aparece en las tres especializaciones:

Los elementos td y th pueden tener un atributo de contenido colspan especifica, cuyo valor debe ser un número entero no negativo válido mayor que cero ...

Fuentes:
Los siguientes reivindicaciones de la página W3Schools ligado en la pregunta son - al menos hoy en día - completamente falso:


Sólo Firefox soporta colspan = "0", que tiene un significado especial ... [Es] le dice al navegador para abarcar la celda de la última columna del grupo de columnas (colgroup)

y


Diferencias entre HTML 4.01 y HTML5

NINGUNO.

Si aún no eres consciente de que W3Schools se lleva a cabo generalmente en el desprecio por los desarrolladores web por sus imprecisiones frecuentes, considere esto una lección de por qué.

Otro trabajo pero la solución fea:. colspan="100", donde 100 es un valor mayor que el total de las columnas que necesita para colspan

Según el W3C, la opción colspan="0" sólo es válida con la etiqueta COLGROUP.

A continuación se muestra una solución es6 concisa (similar a respuesta de Rainbabba pero sin el 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ólo quiero añadir mi experiencia y contestar a esto.
Nota:. Sólo funciona cuando se tiene un table predefinido y una tr con ths, pero va a cargar en sus filas (por ejemplo a través de AJAX) dinámicamente

En este caso se puede contar el número de th de que hay en su primera fila de cabecera, y la usará para abarcar toda la columna.

Esto puede ser necesario cuando se quiere transmitir un mensaje cuando no se han encontrado resultados.

Algo como esto en jQuery, donde table es su tabla 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 acuerdo con la colspan="0" especificación debería resultar en un td anchura de la tabla.

Sin embargo, esto sólo es cierto si la tabla tiene un ancho! Una tabla puede contener filas de diferentes anchuras. Por lo tanto, el único caso en que el procesador conoce el ancho de la mesa si definir un colgroup ! De lo contrario, resultado de colspan = "0" es indeterminable ...

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

No puedo probarlo en navegadores antiguos, pero esto es parte de la especificación desde 4,0 ...

Quizás soy un pensador recta pero estoy un poco desconcertado, no se conoce el número de columna de la tabla?

Por cierto IE6 no honra al colspan = "0", con o sin un colgroup definido. También he intentado usar la culata en T y TH para generar los grupos de columnas, pero el navegador no recognlise forma colspan = "0".

He probado con Firefox 3.0 en Windows y Linux y funciona sólo con un tipo de documento estricta.

Puede comprobar una prueba en varias Bowser en el

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

He encontrado la página de prueba aquí http: //hsivonen.iki .fi / test / WA10 / tablas / colspan-0.html

Edit: Por favor, copiar y pegar el vínculo, el formato no aceptará las partes dobles de protocolo en el enlace (o no soy tan inteligente como para formatear correctamente)

he tenido el mismo problema - cómo resolví mi problema .. Ponga los controles que desea abarcar en una sola td

trate de usar "colspan" en lugar de "colspan". IE le gusta la versión Camelback ...

Licenciado bajo: CC-BY-SA con atribución

No afiliado a StackOverflow

Colspan todas las columnas

tl; dr versión:

Algunos más detalles y pruebas:

Diferencias entre HTML 4.01 y HTML5