Colspan todas las columnas

¿Cómo puedo especificar que una etiqueta td debe abarcar todas las columnas (cuando la cantidad exacta de columnas en la tabla será variable / difícil de determinar cuando se está procesando 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 ser compatible).

Editar: parece que establecer colspan a un valor mayor que la cantidad teórica de columnas que pueda tener funcionará, pero no funcionará si tiene table-layout establecido como fixed . ¿Hay alguna desventaja al usar un diseño automático con un número grande para colspan ? ¿Hay una manera 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 se extiende a través de todos los TD en ninguno de los navegadores anteriores .

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

Esto NO funciona cuando la propiedad CSS de disposición de tabla se establece en 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 disposición de tabla es automática . Espero que esto ayude.

Es un truco y NO garantiza que su fila abarque todas las columnas

Solo usa esto:

 colspan="100%" 

¡Funciona en Firefox 3.6, IE 7 y Opera 11! (y creo que en otros, no pude intentarlo)

Advertencia:

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

Si desea crear una celda ‘título’ que abarque todas las columnas, como encabezado para 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 fin. Se comporta como un div, pero no abarca todo el ancho del elemento principal de la tabla (como haría un div en la misma posición (¡no intente esto en casa!)), Sino que abarca el ancho del mesa. Hay algunos problemas entre navegadores con fronteras y tal (era aceptable para mí). De todos modos, puede hacer que se vea como una celda que abarca todas las columnas. Dentro, puedes hacer filas agregando elementos div. No estoy seguro de si puedes insertarlo entre tr-elements, pero eso sería un truco, supongo (por lo que no es recomendable). Otra opción sería meterse con divs flotantes, ¡pero eso es asqueroso!

Hacer

 

No lo hagas

 

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

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

IE implementa la definición HTML 3.2, establece colspan=0 como 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, decorar cualquier td / th que necesite ajustar con una clase como “maxCol”, 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 implementación, esto no funcionará, no cierre la respuesta, explique en comentarios y lo actualizaré si puede ser cubierto.

Otra solución que funciona pero fea: colspan="100" , donde 100 es un valor mayor que las columnas totales que necesita colspan .

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

Puede determinar el número de columnas en su tabla con algo como esto:

 var firstRow = tableBody.getElementsByTagName('tr')[0]; var numcols = firstRow.getElementsByTagName('td').length; 

Y ahora usa este recuento de columnas como tu lapso de columna. Esto supone que tienes una referencia al elemento del cuerpo para la tabla, pero eso debería ser sencillo.

Solo quiero agregar mi experiencia y responder a esto.
Nota: solo funciona cuando tiene una table predefinida y un tr con th s, pero se cargan en sus filas (por ejemplo, a través de AJAX) dinámicamente.

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

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

Algo así en jQuery, donde la 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 especificación colspan="0" debería dar como resultado un ancho de tabla td.

Sin embargo, esto solo es cierto si tu tabla tiene un ancho. Una tabla puede contener filas de diferentes anchuras. Entonces, ¡el único caso en que el renderizador conoce el ancho de la tabla si define un grupo de col ! 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 …

Tuve el mismo problema: cómo resolví mi problema. Ponga todos los controles que desee en un td

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

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

Lo he intentado con Firefox 3.0 en Windows y Linux, y funciona solo con un doctype estricto.

Puede verificar 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 del protocolo doble en el enlace (o no soy tan inteligente para formatearlo correctamente).

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