¿Error en la mayoría de los navegadores ?: ¿Ignora la posición relativa en ‘tbody’, ‘tr’ y ‘td’?

Cuando intentas posicionar absolutamente el elemento to tbody , tr e incluso td descubres que no funciona en la mayoría de los navegadores. Funciona como se espera en Firefox. No en IE, Edge y Chrome.

position: relative en tbody , tr e incluso td se ignora. Y luego el primer padre con position: relative se usa como “ancla” para la colocación absoluta.

BTW: position: relative do funciona cuando configuras tbody para display: block . Pero entonces puedes tener problemas con el ancho de las filas de la tabla. En general, los elementos secundarios no se comportan con mayor precisión como elementos de tabla. Las columnas se han ido … Pero no es parte de esta pregunta.

Mis preguntas son:
¿Por qué se ignora position: relative en tbody , tr td ?
¿Hay alguna razón para este comportamiento?
¿Es un error que debería ser reparado?

 .example { border: 1px solid #ccc; position: relative; background: #eee; margin: 2em; padding: 2em; width: 50%; } .abs { display: block; position: absolute; left: 100%; top: 0; } table { //border: 5px solid rgba(255,200,0,0.2); border-collapse: collapse; } tbody { border: 2px solid red; position: relative; } td { border: 1px solid lime; padding: 1em; } .text--red { color: red; } .text--gray { color: gray; } 
 
  • Gray background is table wrapper with position relative.
  • Redline is tbody with position relative.
tbody1>tr1>td
tbody1>tr2>td
tbody1>tr3>td absolute position to tbody
tbody2>tr1>td
tbody3>tr1>td
tbody3>tr2>td absolute position to tbody

Fuentes:

https://www.w3.org/TR/css-position-3/#valdef-position-relative

https://www.w3.org/TR/css-position-3/#property-index

Nombre de la propiedad: position Se aplica a: todos los elementos excepto table-column-group y table-column

https://developer.mozilla.org/en-US/docs/Web/CSS/position#relative Acerca del ‘contexto de astackmiento’ pero ese no es el tema de esta pregunta

Este valor ( position: relative ) crea un nuevo contexto de astackmiento cuando el valor de z-index no es automático. Su efecto en la table-*-group , table-row table-column , table-column , table-cell y table-caption no están definidos.

Preguntas relacionadas:

  1. Superposición encima de tbody
  2. Posicionamiento relativo a la tabla-celda

Lo que dice MDN es exacto a partir de CSS2. Durante muchos años, el efecto de la position: relative en los cuadros de la tabla interna fue indefinido ( §9.3.1 ), y las implementaciones estuvieron lejos de ser interoperables.

Esto cambió solo recientemente en css-position-3, que ahora define los efectos de la siguiente manera :

El efecto de position: relative en los elementos de la tabla se define de la siguiente manera:

  • table-row-group, table-header-group, table-footer-group y table-row offset en relación con su posición normal dentro de la tabla. Si las celdas de la tabla abarcan varias filas, solo se desplazarán las celdas que se originan en la fila en posición relativa.

  • tabla-columna-grupo, tabla-columna no desplazan la columna respectiva y no tienen ningún efecto visual cuando se aplica la position: relative .

  • table-caption y table-cell offset en relación con su posición normal dentro de la tabla. Si una celda de la tabla abarca varias columnas o filas, la celda con distribución completa se desplaza.

Sin embargo, las implementaciones todavía están por todas partes, y la razón es que las implementaciones del modelo de tabla CSS siguen siendo caóticas, impredecibles, no completamente interoperables y llenas de equipaje histórico que nadie quiere tocar con un poste de 10 pies. Se puede saber mediante una lectura a través de la especificación css-tables-3 y los problemas de GitHub del CSSWG para esa especificación .

Dicho esto, los proveedores de navegadores están resolviendo problemas tangenciales de manera lenta y cautelosa, como el posicionamiento de cuadros de tablas internas, poco a poco. Simplemente no esperes un progreso rápido.

BTW: position: relative do funciona cuando configuras tbody para display: block .

Sí, porque al hacerlo, el tbody deja de funcionar como un tbody y comienza a actuar como un div , y destruyes completamente la estructura CSS de tu tabla.