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>
<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>