Colspan todas las columnas

¿Cómo puedo especificar que una tdetiqueta debe abarcar todas las columnas (cuando la cantidad exacta de columnas en la tabla será variable / difícil de determinar cuando se procesa el HTML)? w3schools menciona que puede usar colspan="0", pero no dice exactamente qué navegadores admiten ese valor (IE 6 está en nuestra lista para admitir).

Parece que la configuración colspana un valor mayor que la cantidad teórica de columnas que puede tener funcionará, pero no funcionará si lo ha table-layoutconfigurado fixed. ¿Hay alguna desventaja en el uso de un diseño automático con un gran número colspan? ¿Hay una forma más correcta de hacer esto?

Tengo IE 7.0, Firefox 3.0 y Chrome 1.0

El atributo colspan = "0" en un TD NO abarca todos los TD en ninguno de los navegadores anteriores .

Tal vez no se recomiende como práctica de marcado adecuada, pero si le da un valor de colspan más alto que el total no posible. de columnas en otras filas , entonces el TD abarcaría todas las columnas.

Esto NO funciona cuando la propiedad CSS de diseño de tabla está establecida como fija.

Una vez más, esta no es la solución perfecta, pero parece funcionar en las 3 versiones de navegador mencionadas anteriormente cuando la propiedad CSS de diseño de tabla es automática . Espero que esto ayude.

Solo usa esto:

colspan="100%"

¡Funciona en Firefox 3.6, IE 7 y Opera 11! (y supongo que en otros, no podría intentarlo)

Advertencia: como se menciona en los comentarios a continuación, esto es realmente lo mismo que colspan="100". Por lo tanto, esta solución se romperá para tablas con CSS table-layout: fixed, o más de 100 columnas.

Si desea crear una celda de 'título' que abarque todas las columnas, como encabezado de su tabla, puede usar la etiqueta de título ( http://www.w3schools.com/tags/tag_caption.asp / https: // developer.mozilla.org/en-US/docs/Web/HTML/Element/caption) Este elemento está destinado a este propósito. Se comporta como un div, pero no abarca todo el ancho del elemento primario de la tabla (como lo haría un div en la misma posición (¡no intente esto en casa!)), En cambio, abarca el ancho del mesa. Hay algunos problemas de navegador cruzado con bordes y tales (fue aceptable para mí). De todos modos, puede hacer que parezca una celda que abarca todas las columnas. Dentro, puede hacer filas agregando elementos div. No estoy seguro de si puede insertarlo entre elementos tr, pero supongo que sería un truco (por lo que no es recomendable). Otra opción sería jugar con divs flotantes, ¡pero eso es asqueroso!

Hacer

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

No

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

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

tl; versión dr:

colspan="0"no funciona en ningún navegador en absoluto. W3Schools está mal (como siempre). HTML 4 dice que eso colspan="0"debería hacer que una columna abarque toda la tabla, pero nadie implementó esto y se eliminó de la especificación después de HTML 4.

Algunos más detalles y evidencia:

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

  Aquí hay una demostración que muestra esto; Pruébelo en cualquier navegador que desee.

  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>

  Ejecutar fragmento de códigoOcultar resultados

  Expandir fragmento

• La especificación HTML 4 (ahora viejo y anticuado, pero de vuelta actual cuando se hizo esta pregunta) tenía de hecho dicen que colspan="0"deben ser tratados como que abarca todas las columnas:

  El valor cero ("0") significa que la celda abarca todas las columnas desde la columna actual hasta la última columna del grupo de columnas (COLGROUP) en el que se define la celda.

  Sin embargo, la mayoría de los navegadores nunca implementaron esto.

• HTML 5.0 (hizo una recomendación de candidato en 2012), el estándar de vida HTML WhatWG (el estándar dominante en la actualidad) y la última especificación W3 HTML 5 no contienen la redacción citada del HTML 4 anterior, y acuerdan unánimemente que un colspan0 no está permitido, con esta redacción que aparece en las tres especificaciones:

  Los elementos tdy thpueden tener un colspanatributo de contenido especificado, cuyo valor debe ser un número entero no negativo válido mayor que cero ...

  Fuentes:

  • 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

• Las siguientes afirmaciones de la página de W3Schools vinculadas en la pregunta son, al menos hoy en día, completamente falsas:

  Solo Firefox admite colspan = "0", que tiene un significado especial ... [Le] le dice al navegador que abarque la celda hasta la última columna del grupo de columnas (colgroup)

  y

  Diferencias entre HTML 4.01 y HTML5

  NINGUNA.

  Si aún no sabe que W3Schools es generalmente despreciado por los desarrolladores web por sus imprecisiones frecuentes, considere esto una lección de por qué.

Para IE 6, querrá igualar colspan al número de columnas en su tabla. Si usted tiene 5 columnas, entonces usted querrá: colspan="5".

La razón es que IE maneja los colspans de manera diferente, usa la especificación HTML 3.2:

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

El error está bien documentado .

Si está utilizando jQuery (o no le importa agregarlo), esto hará el trabajo mejor que cualquiera de estos 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 la implementación, decoro cualquier td / th que necesito ajustar con una clase como "maxCol" y luego 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 implementación para la que esto no funcionará, no cierre la respuesta, explique en los comentarios y actualizaré si se puede cubrir.

Otra solución funcional pero fea: colspan="100"donde 100 es un valor mayor que el total de columnas que necesitacolspan .

Según el W3C, la colspan="0"opción solo es válida con COLGROUPetiqueta.

A continuación se muestra una solución concisa es6 (similar a la respuesta de Rainbabba pero sin 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>

Solo quiero agregar mi experiencia y responder a esto.
Nota: Solo funciona cuando tienes un predefinido tabley un trconth s, pero está cargando en sus filas (por ejemplo, a través de AJAX) dinámicamente.

En este caso, puede contar el número de th 's que hay en su primera fila de encabezado, y usarlo para abarcar toda la columna.

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

Algo así en jQuery, donde tableestá 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;
    }
}

Tal vez soy un pensador directo, pero estoy un poco perplejo, ¿no sabes el número de columna de tu tabla?

Por cierto, IE6 no respeta el colspan = "0", con o sin un colgroup definido. También intenté usar thead y th para generar los grupos de columnas, pero el navegador no reconoce la forma colspan = "0".

He intentado con Firefox 3.0 en Windows y Linux y solo funciona con un estricto doctype.

Puede consultar una prueba en varios bowser en

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

Encontré la página de prueba aquí http://hsivonen.iki.fi/test/wa10/tables/colspan-0.html

Editar: copie y pegue el enlace, el formato no aceptará las partes de doble protocolo en el enlace (o no soy tan inteligente como para formatearlo correctamente).

De acuerdo con la especificación colspan="0" debe dar como resultado un ancho de tabla td.

Sin embargo, esto solo es cierto si su tabla tiene un ancho. Una tabla puede contener filas de diferentes anchos. Entonces, el único caso en que el renderizador conoce el ancho de la tabla si define un grupo de colores ! De lo contrario, el 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 ...

intente usar "colSpan" en lugar de "colspan". A IE le gusta la versión camelBack ...