rowspan - tablas html avanzado

Colspan todas las columnas

Question

¿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 procesa el HTML)? w3schools menciona que puedes 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 de colspan en un valor mayor que la cantidad teórica de columnas que puede tener funcionará, pero no funcionará si tiene table-layout establecido en fixed . ¿Hay alguna desventaja en el uso de un diseño automático con un gran número para colspan ? ¿Hay una manera más correcta de hacer esto?

Answer 1

A continuación se muestra una solución es6 concisa (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>

Answer 2

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. W3Schools está mal (como siempre). HTML 4 dijo que 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.

Un poco más de detalle y evidencia:

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

  Aquí hay una demostración que muestra esto; Pruébalo en cualquier navegador que te guste.

  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 de HTML 4 (ahora antigua y desactualizada, pero actual cuando se hizo esta pregunta) w3.org/TR/REC-html40/struct/tables.html#adef-colspan que colspan="0" debería tratarse como si abarcara 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 de WhatWG HTML (el estándar dominante hoy) y la última especificación de W3 HTML 5 no contienen la redacción citada de HTML 4 anterior, y acuerdan por unanimidad que un colspan de 0 no está permitido, con esta fraseología que aparece en las tres especificaciones:

  Los elementos td y th pueden tener un atributo de contenido colspan especificado, cuyo valor debe ser un entero válido no negativo 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 a la pregunta son, al menos en la actualidad, completamente falsas:

  Solo Firefox admite colspan = "0", que tiene un significado especial ... [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 está al tanto de que W3Schools generalmente es rechazado por los desarrolladores web por sus frecuentes inexactitudes, considere esta una lección de por qué.

Answer 3

De acuerdo con la especificación colspan="0" debería resultar en 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. Por lo tanto, ¡el único caso en el que el renderizador conoce el ancho de la tabla si define un colgroup ! 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 ...

Answer 4

Otra solución de trabajo pero fea: colspan="100" , donde 100 es un valor más grande que el total de columnas que necesitas para colspan .

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

Answer 5

Para IE 6, querrá igualar colspan al número de columnas en su tabla. Si tienes 5 columnas, querrás: 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 de HTML 3.2, establece colspan=0 como colspan=1 .

El error está bien documentado .

Answer 6

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 para este propósito. Se comporta como un div, pero no abarca todo el ancho del padre 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 varios navegadores con los bordes y otros (fue aceptable para mí). De todos modos, puedes hacer que se vea como una celda que abarca todas las columnas. Dentro, puedes hacer filas agregando elementos div. No estoy seguro de si puede insertarlo entre los elementos tr, pero supongo que sería un hack (por lo que no se recomienda). 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 hacer

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

Answer 7

Si estás usando jQuery (o no te 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 necesite ajustada 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 no funcionará, no rechace la respuesta, explique en los comentarios y actualizaré si se puede cubrir.

Answer 8

Solo quiero agregar mi experiencia y responder a esto.
Nota: Solo funciona cuando tiene una table predefinida y una tr con th s, pero se está cargando 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 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 table es tu 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;
}
}

Answer 9

Solo usa esto:

colspan="100%"

¡Funciona en Firefox 3.6, IE 7 y Opera 11! (y supongo 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 interrumpirá para las tablas con table-layout: fixed css table-layout: fixed , o más de 100 columnas.

Answer 10

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

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

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

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

Edición: Copie y pegue el enlace, el formato no aceptará las partes de doble protocolo en el enlace (o no soy tan inteligente para formatearlo correctamente).

Answer 11

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 práctica de marcado adecuada, pero si le da un valor de colspan más alto 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 diseño 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 diseño de tabla es automática . Espero que esto ayude.

Answer 12

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

Answer 13

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