Establecer el ancho de las columnas en tablas HTML

Para una tabla pequeña y puntual basta una declaración en línea como <th style="width: 15%">ID</th>. En un componente reutilizable, prefiere una hoja de estilos o un <colgroup> para que la regla se aplique a toda la columna, incluidas sus celdas de datos:

<style>
.people {
  border-collapse: collapse;
  table-layout: fixed;
  width: 100%;
}

.people th,
.people td {
  border: 1px solid black;
  overflow-wrap: anywhere;
}

.people .id-column { width: 15%; }
.people .name-column { width: 70%; }
.people .age-column { width: 15%; }
</style>
<table class="people">
  <colgroup>
    <col class="id-column">
    <col class="name-column">
    <col class="age-column">
  </colgroup>
  <thead>
    <tr><th scope="col">ID</th><th scope="col">Name</th><th scope="col">Age</th></tr>
  </thead>
  <tbody>
    <tr><td>1</td><td>John</td><td>25</td></tr>
    <tr><td>2</td><td>Jackson</td><td>40</td></tr>
  </tbody>
</table>

Los tres porcentajes suman 100%, así que la tabla tiene una distribución inicial clara: Name es más ancha que ID y Age. table-layout: fixed hace que el tamaño dependa principalmente del ancho de la tabla, los anchos explícitos y la primera fila, no de la celda más larga de cada fila. overflow-wrap: anywhere permite ajustar un valor inusualmente largo sin ensanchar la tabla.

<colgroup> debe aparecer antes de los grupos de filas de la tabla. Un <col> representa una columna, no una celda visible, y no tiene contenido propio. Usa span en un <col> cuando varias columnas consecutivas compartan una regla. Este enfoque también mantiene el HTML semántico: usa <th> para encabezados y scope="col" para que la tecnología de asistencia los relacione con sus celdas.

Elegir entre clases y :nth-child()

Puedes establecer anchos en la primera fila con selectores como .people th:nth-child(1) { width: 15%; }, .people th:nth-child(2) { width: 70%; } y .people th:nth-child(3) { width: 15%; }. Así conservas las técnicas basadas en clases y :nth-child() sin añadir una clase a cada encabezado. Las clases son más claras cuando importa el significado de la columna; :nth-child() resulta práctico con un orden estable y sencillo.

No dependas de :nth-child() cuando las filas contengan colspan, cuando las filas de encabezado tengan otra estructura o cuando se puedan reordenar las columnas. En esos casos, <colgroup> o las clases con nombre hacen explícita la correspondencia. Si solo especificas algunos anchos, el navegador distribuye el espacio restante; no supongas que una columna sin especificar siempre recibirá un porcentaje exacto con el diseño automático.

Tratar el contenido que no cabe

El diseño fijo no hace que una columna estrecha sea lo bastante grande para cualquier valor. Una URL o identificador largo sin cortes puede desbordarse si no puede ajustarse. El siguiente límite conserva la regla de ancho y permite desplazamiento horizontal en la celda, sin cambiar el diseño de la página:

<style>
  .compact {
    table-layout: fixed;
    width: 320px;
  }
  .compact th,
  .compact td {
    max-width: 0;
    overflow: hidden;
    overflow-wrap: anywhere;
  }
  .compact td.code {
    overflow-x: auto;
    white-space: nowrap;
  }
</style>
<table class="compact">
  <colgroup><col style="width: 25%"><col style="width: 75%"></colgroup>
  <tr><th scope="col">Type</th><th scope="col">Value</th></tr>
  <tr><td>URL</td><td class="code">https://example.com/a-very-long-value-without-spaces</td></tr>
</table>

Para texto normal, ajustar líneas suele ser preferible al desplazamiento horizontal. Prueba la tabla con contenido realista y en ventanas estrechas. Los anchos son indicaciones interpretadas por el algoritmo de diseño de tablas, no una garantía de que cada celda conserve un tamaño exacto en píxeles.