table-layout

<< Propiedades de las tablas border-collapse >>

Indica si el tamaño horizontal de la tabla y las celdas debe adaptarse al tamaño del contenido, o por el contrario, debe mantenerse fijo aunque los contenidos no quepan dentro del tamaño establecido. Sus valores son:

  • auto: Es el valor por defecto si no pusiéramos esta propiedad. Las celtas y la tabla pueden tener un tamaño definido por el usuario. Pero si el contenido no cabe (bien sea por insertar una imagen o un elemento que ocupe más que la celda, o porque introducimos mucho texto sin espacios en blanco para que pueda hacer saltos de línea), entonces aumentará el tamaño de la celda (y con ello el de la tabla y hablamos de tamaños fijos en las celdas y no porcentajes) para adaptarse al nuevo contenido.
  • fixed: El tamaño de las celdas y la tabla siempre será el mismo. Si insertamos un contenido que no quepa, se saldrá por los bordes, quedando un efecto un poco feo como se puede ver aquí.
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Ejemplo tablas</title>
    <link rel="stylesheet" href="tablas.css" />
  </head>
  <body>
    <table>
      <tr>
        <td>Name</td>
        <td>Location</td>
      </tr>
      <tr>
        <td>Lion</td>
        <td>África</td>
      </tr>
      <tr>
        <td>Seal</td>
        <td>Antártida</td>
      </tr>
      <tr>
        <td>Norwegian Lemming</td>
        <td>Europa</td>
      </tr>
      <tr>
        <td>Tiger</td>
        <td>Asia</td>
      </tr>
    </table>
  </body>
</html>

<< Propiedades de las tablas border-collapse >>