Ancho de columnas en tabla

22/Jun/2015 CSS , , , Deja un comentario

En este ejemplo vamos a ver como podemos definir el ancho de columnas en tabla HTML para que dicho ancho sea diferente en cada una de las columnas que tengamos.

Lo primero para definir el ancho de columnas en tabla HTML vamos a necesitar crear una tabla. Los elementos de tabla en HTML que vamos a utilizar son table para definir la tabla, tr para definir la fila y td para definir la celda.

Vamos a crear nuestra tabla:

  1. <th>País</th>
  2. <th>Capital</th>
  3. <th>Superficie</th>
  4. <th>Habitantes</th>
  5. </tr>
  6. <td>España</td>
  7. <td>Madrid</td>
  8. <td>504.645 km<sup>2</sup></td>
  9. <td>46,6 M</td>
  10. </tr>
  11. ...
  12. </table>

Para poder definir el ancho de columnas en tabla tenemos que recurrir al lenguaje CSS. En concreto el lenguaje CSS va a definir el ancho de las columnas mediante los elementos td que son los que representan a las celdas.

Para poder acceder al elemento td utilizaremos el selector:

  1. table td {
  2. ...
  3. }

Si queremos acceder a todos las celdas de la primera columna utilizaremos el pseudoelemento nth-child, al cual pasaremos el valor 1.

  1. table td:nth-child(1) {
  2. ...
  3. }

Si queremos darle el ancho a otras columnas podemos hacerlo cambiando el valor que pasamos como parámetro: 2, 3, 4,...

Si solo queremos dar el ancho a la primera columna también podríamos utilizar el pseudolemento first-child.

  1. table td:first-child {
  2. ...
  3. }

Solo nos queda utilizar la propiedad width para indicar el tamaño que queramos darle a la columna.

De esta forma podríamos definir el ancho de columnas en tabla de la siguiente forma:

  1. table td:first-child {
  2. width: 100px;
  3. }
  4.  
  5. table td:nth-child(2) {
  6. width: 100px;
  7. }
  8.  
  9. table td:nth-child(3) {
  10. width: 200px;
  11. }
  12.  
  13. table td:last-child {
  14. width: 150px;
  15. }

Vídeos sobre CSS


¿Algo que nos quieras comentar?

Déjanos tu comentario, no te preocupes que tu email no será publicado

*

*