22 Votos

HTML/CSS: Alinear Columna de una Tabla completa derecha o centrada

Pregunta de Compi | 19/07/2021 a las 18:20

Tengo una tabla HTML bastante grande en la que quiero alinear el texto de una columna completa, alineada derecha o centrada.

Hasta ahora, solo conozco la posibilidad de alineación de configurar CSS inline para cada elemento TD de la tabla, por ejemplo, así:

...
<tr>
  <td>contenido alineado en la izquierda</td>
  <td style="text-align:center">contenido centrado</td>
  <td style="text-align:right">contenido alineado a la derecha</td>
</tr>
...

El problema es obvio: tengo que repetir los CSS de alineación de texto para cada fila de tabla (TR), y como he dicho, en mi caso, que son muchas filas.

Entonces, ¿no hay otra posibilidad más conveniente para hacer eso? Por ejemplo, definiendo algunos CSS o HTML solo una vez en una posición central o solo una vez por columna? ¿O al menos una solución más sencilla que eso?

ResponderPositivoNegativoFechaVotos
Avatar Anja Proggy
4Mejor Respuesta4 Votos

Puede usar el selector pseudo CSS nth-child, por ejemplo.

Aquí hay un ejemplo para una posible regla de CSS:

table.colright td:nth-child(2) {
  text-align: right;
}

Luego solo tiene que asignar la clase CSS definida a su tabla:

<table class="colright">
  <tr><td>A</td><td>B</td><td>C</td></tr>
  <tr><td>A</td><td>B</td><td>C</td></tr>
  <tr><td>A</td><td>B</td><td>C</td></tr>
</table>

Con td:nth-child(2) está seleccionando cada segundo elemento TD. En cada fila, comenzando con TR, el conteo se restablece para que sea suficiente para asignar la clase una vez a toda su tabla para alinear siempre la segunda columna.
22/07/2021 a las 16:59

ResponderPositivo Negativo
Avatar Progger99
02 Votos

Para apoyar también los navegadores mayores que no pueden manejar nth-child, puede usar los siguientes CSS:

table.colright td + td + td {
  text-align: right;
}

Usando este selector CSS, selecciona cada columna, respectivamente, cada elemento TD antes de que sean otros dos elementos TD.

Entonces, con este CSS, usted mismo alinearía a cada tercera columna de cada tabla que ha asignado la clase "colright".
23/07/2021 a las 18:57

ResponderPositivo Negativo
Avatar Compi
11 Voto

Si solo desea hacerlo más corto que <td style="text-align:center"> también puede definir la clase CSS ralign {text-align:center} y luego escriba <td class="ralign"> para cada celda quiere alinearte derecha.
24/07/2021 a las 08:46

ResponderPositivo Negativo
Responder

Temas Relacionados

CSS: Cómo incluir CSS en HTML

Tutorial | 0 Comentarios

MySQL: Eliminar Datos de Tabla - Diferencia entre TRUNCATE, DELETE y DROP

Tutorial | 0 Comentarios

MySQL: Agregar una nueva Columna a una Tabla

Tutorial | 0 Comentarios

SQLite: Examinar si existe una Tabla

Información | 0 Comentarios

CSS: "align:center" y "align:right" no funcionan

Pregunta | 1 Respuesta

RTF: Alineación del Texto: Izquierda, Derecha, Centrada y Justificada

Información | 0 Comentarios

Validación HTML5: Element "link" is missing required attribute "property"

Pregunta | 1 Respuesta

Aviso Importante

Por favor tenga en cuenta: Las contribuciones publicadas en askingbox.com son contribuciones de los usuarios y no deben reemplazar el asesoramiento profesional. No son verificados por independientes y no reflejan necesariamente la opinión de askingbox.com. Aprende más.

Participar

Haga su propia pregunta o escriba su propio artículo en askingbox.com. He aquí cómo.