El elemento colgroup de la tabla HTML no funciona

Quiero diferentes estilos en cada columna de una tabla. He leído que podrías hacer eso usando <colgroup> o <col>, pero no tuve suerte. tengo un ejemplo aquí, y nada parece cambiar. ¿Estoy haciendo algo mal? ¿Funcionará esto en XHTML?

Sé que podría agregar un atributo de “clase” en cada <td>pero eso parece débil.

Eso es correcto. Mientras colgroup en sí mismo es compatible con todos los navegadores, esto no es cierto para los atributos del interior col elemento. De los posibles atributos, sólo width es compatible con todos los navegadores. Pero a diferencia de CSS, <col width=""> solo admite anchos de píxeles y porcentajes.

No lo uses. En su lugar, cree clases CSS y asígnelas a cada td. Sí, apesta.

Establecer su table-layout a automático en lugar de fijo…

table {table-layout: auto;}

Mi sitio personal admite varios temas y veo este tipo de diferencias todo el tiempo.

Aquí hay un truco que usé que realmente funcionó bien. En un archivo css genérico (en todo el sitio) pongo:

.mytable td:nth-child(1) { width: var(--w1);}
.mytable td:nth-child(2) { width: var(--w2);}
.mytable td:nth-child(3) { width: var(--w3);}
.mytable td:nth-child(4) { width: var(--w4);}

y así sucesivamente hasta lo que consideré que era el número máximo de columnas en cualquier tabla que necesitaría en mi sitio.

Luego, en cada tabla, podría definir el ancho con un estilo como:

<table class="mytable" id="tbl1" style="--w1: 30px; --w2: 100px; --w3: 80px;">

Esto facilitó la configuración de los anchos de columna y además pude agregar código para cambiar el tamaño de las columnas, lo que simplemente tuvo que cambiar la propiedad de estilo en la tabla para la columna deseada. Esto evitó tener que hacer numerosas entradas CCS cada vez que quería definir los anchos de columna de una tabla. Para cambiar el ancho de una columna, podría usar algo como esto:

document.getElementById("tbl1").style.setProperty("--w2", "123px");

Lo anterior simplemente cambia el ancho de la columna 2 cambiando el valor de la variable –w2.

Puede usar selectores de CSS para obtener resultados similares sin agregar clases adicionales.

Como ejemplo, si desea dar un estilo específico a una segunda columna, puede usar:

table>tbody>td:nth-child(2){font-weight: bolder;}

En 2020, si desea diferentes estilos en las columnas, puede:
1. estilo/CSS

, pero solo para unas pocas propiedades
2. use th/td:nth-child(#number) en CSS (mi solución preferida, no tengo idea de lo que sucede con colspans)
3. agregue manualmente una clase a los elementos th/td

Referencias:
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/col
https://www.w3.org/TR/CSS22/tables.html#columns

Se supone que no debes usar el atributo HTML de “ancho”, en su lugar usa estilo/CSS. En el estilo/CSS para

, se supone que debe usar solo “borde”, “fondo”, “ancho” y “visibilidad”. Puedes usar ems para expresar valores.

Estoy confundido: w3 dice “La propiedad ‘ancho’ da el ancho mínimo para la columna”. lo que me parece contradictorio, dada la existencia de una propiedad de “ancho mínimo”. En Firefox 72 (Ubuntu)

<col style="width: 13em">

establece un ancho “fijo” (como esperaba). Si cambio el tamaño de la ventana, estrechándola, la columna cambia de tamaño y el contenido se envuelve en más líneas.

Así que acabo de tener este mismo problema… el verdadero problema es que incluso cuando se usa estilo/CSS en

(en lugar de atributos HTML), solo puede aplicar estilo a las siguientes cosas:

• ancho
• fronteras
• colores de fondo
• visibilidad

Fuente: https://www.w3.org/TR/CSS21/tables.html#columns

Si realmente necesita usar etiquetas cols sin Reaccionar restricción entonces dangerouslySetInnerHTML ayudará:

<colgroup dangerouslySetInnerHTML={{
  __html: `
    <col style="background: red;"/>
    <col style="width: 20px;"/>
  `
}}/>

Tenga en cuenta que si bien esto funciona, esta no es la forma recomendada de trabajar con React.