table-layout
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 class="mi-tabla">
<thead>
<tr>
<th>Nombre y Apellido</th>
<th>Edad</th>
</tr>
</thead>
<tbody>
<tr>
<td>Ana García Pérez</td>
<td>32</td>
</tr>
<tr>
<td>Contenido mucho más largo en esta celda para mostrar el ajuste</td>
<td>25</td>
</tr>
</tbody>
</table>
</body>
</html>La diferencia por tanto entre ambos es:
- auto: El contenido define el ancho de la columna.
- fixed: El ancho de la columna define cómo se muestra el contenido. Si el contenido no cabe, se cortará o se desbordará según las propiedades que le demos a overflow, text-overflow, etc.