Colspan todas las columnas

385

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

Beto
fuente
La respuesta aceptada es acerca de cómo NO hacer esto, y parece tener serias desventajas de rendimiento / consistencia. Entonces, supongo que la respuesta es: codificar el número de columnas. No veo ninguna alternativa viable.
Andrew Koster,

Respuestas:

268

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.

Nahom Tijnam
fuente
Si especifica un doctype estricto al comienzo del html, Firefox 3 renderiza el colspan como lo requieren las especificaciones html 4.01.
Eineki
253
Soy fanático de colspan="42"abarcar todo el rango. Obviamente, este es un problema para> 42 columnas, pero es uno de los pocos números mágicos que apruebo.
Martin Carney
40
Le recomiendo que ponga colspan = <número correcto exacto>. Acabo de encontrar un gran error de rendimiento en Firefox que me llevó todo el día descubrir. Un colspan arbitrariamente grande hará que FF se ahogue en una mesa grande con colapso de borde: colapso. Mi mesa con 800 filas y 8 columnas tardaba 5 segundos en renderizarse. Con el colspan correcto, vuelve a ser razonable en 1 segundo. bugzilla.mozilla.org/show_bug.cgi?id=675417
InfinitiesLoop
2
Recomiendo no usar este método. Acabo de obtener un resultado muy extraño de Chrome en OSX (columnas superpuestas entre sí).
Tzach
Otro problema encontrado en Chrome si intenta dar un borde al elemento TR que contiene el TD "sobredimensionado", el borde derecho no será visible.
Massimo
272

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.

Cluxter
fuente
16
Probado [adicionalmente] en IE6 - IE8, Chrome [en PC y Mac], Firefox 4.0 [PC y Mac], Safari 5 [PC y Mac]
hndcrftd
11
¿Cómo es esto todavía tan oscuro? ¡Esto debería gritarse en cada esquina! He estado luchando con este maldito problema de colspan en diferentes momentos desde hace bastante tiempo
hndcrftd
30
En Chrome y Firefox, colspan = "3%" se maneja igual que colspan = "3".
zpmorgan
98
@zpmorgan y @Sprog, ¡tienes razón! colspan="100%"significa exactamente colspan="100".
NemoStein
37
Lol, estaba muy feliz de ver finalmente una solución coherente de navegador cruzado para este problema, solo para descubrir a través de los comentarios que este es realmente un engañoso que no funciona como se esperaba :( Creo que no merece más votos a favor que la respuesta aceptada = /
Francisco
64

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>
natevw
fuente
1
Exactamente lo que estaba buscando para poner los controles de paginación en la parte inferior de una tabla de datos. Funciona perfectamente Muchas gracias.
Comencau
55
Esto no funciona si desea abarcar todos los cols en el medio de una tabla ... como grupo por separador entre grupos relacionados de filas. (Chrome)
David Hempy
17

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>

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

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

Mark Amery
fuente
44
Jaja, me gusta cómo las funciones útiles de la API se eliminan por completo cuando nadie las implementa. Increíble proceso
Andrew Koster,
14

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 .

George Stocker
fuente
1
La cantidad de columnas puede ser variable, actualizaré mi pregunta para incluir ese comentario.
Bob
Si bien el consejo en el párrafo superior parece razonable, creo que muchos de los detalles aquí no son del todo correctos. La especificación HTML 3.2 dice que colspans deben ser enteros positivos , lo que hace que sea colspan=0ilegal; en ninguna parte dicta explícitamente que se colspan=0debe manejar como colspan=1(aunque estoy seguro de que eso es lo que hace IE 6). Además, la cita no se encuentra (¿ya no?) En ninguna parte de la página del foro a la que se vincula, y la mayoría de los resultados de búsqueda de Google (¿ahora?) Son sobre errores relacionados con IE 6 colspan completamente diferentes .
Mark Amery
11

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.

rainabba
fuente
1
Sería genial si tuviera una versión JS de vainilla
jpaugh
¿Tiene un caso de uso común que carece de soporte $ (selector) o simplemente no quiere usarlo?
rainabba
1
Ninguno. Tengo curiosidad por saber si jQuery agrega algún beneficio aquí; es un requisito previo bastante considerable, y parece que aquí solo se usa mínimamente.
jpaugh
Lo suficientemente justo. Entre jQuery y Angular, es raro que no tenga esas herramientas, así que las uso por defecto. Sin embargo, dejo que a otra persona se le ocurra la versión vainilla por ahora.
rainabba
1
Como jQuery está algo desactualizado, agregué una versión / respuesta es6 (no quería actualizar esta respuesta con un código completamente diferente).
Sjeiti
5

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.

Rapaz
fuente
colspan = "100" (por ejemplo, más allá del límite) puede causar una representación de tabla muy extraña en algunos casos (intentaré buscar algunos casos de prueba y publicar las URL)
scunliffe
-1 porque hasta donde puedo determinar la afirmación en el párrafo final es falsa. HTML 4 permite que <td>s tenga colspan="0"(vea w3.org/TR/REC-html40/struct/tables.html#adef-colspan ), mientras que HTML 5.0 no permite span="0"un colgroup(vea w3.org/TR/html50/tabular- data.html # attr-colgroup-span que establece que "un valor de atributo de contenido de intervalo ['s] debe ser un número entero no negativo válido mayor que cero" ).
Mark Amery
2

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>

Sjeiti
fuente
-1

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;
    }
}
skiwi
fuente
Al igual que la solución de JavaScript publicada antes de esta , esta no se generaliza bien; el número de ths no es necesariamente el número de columnas, ya que algunas de ellas pueden tener un colspanconjunto, por lo que esto no funcionará como está escrito para todos.
Mark Amery
-2

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

Eineki
fuente
Estoy de acuerdo con la primera parte: ¿seguramente podrías averiguar cuántas celdas vas a tener en la fila? ¿De qué otra manera lo generarías?
nickf
13
No necesariamente, tengo una aplicación con una tabla AJAX generada dinámicamente y la cantidad de columnas puede cambiar de devolución de llamada a devolución de llamada. Además, al desarrollar puede "saber" la cantidad de columnas, pero esto puede cambiar y simplemente sabe que se perderá una de estas
Mad Halfling,
11
Además, si agrega columnas más tarde, es posible que se olvide de cambiar el colspan, mejor tener eso siempre es max.
Adam
-2

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

FERcsI
fuente
"esto es parte de la especificación desde 4.0" - No, no exactamente. Se era parte de la especificación, pero esta se eliminó en HTML 5 y una colspande 0 se hizo ilegal. Tanto w3.org/TR/html50/… (la especificación HTML 5.0) como html.spec.whatwg.org/multipage/… (el último estándar de vida HTML WhatWG) colspandeben ser mayores que cero. Y como se señala en otras respuestas aquí, los navegadores nunca implementaron el viejo comportamiento HTML 4 que usted cita.
Mark Amery
-6

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


fuente
44
solo cuando se usa IE y se configura a través de JavaScript y .setAttribute ('colSpan', int); Tenga en cuenta que esto se solucionó en IE8 (solo en modo stds)
scunliffe
1
+1 - ¡No sabía esto y fue de gran ayuda! No pensé que colSpan incluso trabajara en IE6.
mwilcox