Propiedad empty-cells
La propiedad empty-cells le indica al navegador
cómo mostrar el fondo y el borde de las celdas
td o celdas
th de una tabla HTML:
mostrarlos o no.
Una celda se considera vacía en los siguientes casos:
no hay ningún carácter, la celda contiene
solo espacio (uno o varios), salto
de línea o tabulación, o si la propiedad
visibility
está establecida como hidden.
Para hacer que una celda no esté vacía, pero sin
texto visible, se utiliza el siguiente
truco: en la celda se escribe un espacio de no separación
.
La propiedad no funciona si se establece border-collapse
con el valor collapse.
Sintaxis
selector {
empty-cells: show | hide;
}
Valores
| Valor | Descripción |
|---|---|
show |
El fondo y el borde se muestran en una celda vacía. |
hide |
El fondo y el borde no se muestran en una celda vacía. |
Valor por defecto: show.
Ejemplo . Valor show
Actualmente en la tabla algunas celdas están vacías, pero aún así tienen borde y fondo:
<table>
<tr>
<td>celda</td>
<td></td>
<td>celda</td>
</tr>
<tr>
<td></td>
<td>celda</td>
<td></td>
</tr>
<tr>
<td>celda</td>
<td>celda</td>
<td>celda</td>
</tr>
</table>
table {
width: 400px;
empty-cells: show;
}
td {
border: 1px solid black;
background-color: #f3f3f3;
text-align: center;
}
:
Ejemplo . Valor hide
Y ahora las celdas vacías no tendrán fondo ni borde:
<table>
<tr>
<td>celda</td>
<td></td>
<td>celda</td>
</tr>
<tr>
<td></td>
<td>celda</td>
<td></td>
</tr>
<tr>
<td>celda</td>
<td>celda</td>
<td>celda</td>
</tr>
</table>
table {
width: 400px;
empty-cells: hide;
}
td {
border: 1px solid black;
background-color: #f3f3f3;
text-align: center;
}
:
Véase también
-
la pseudoclase
empty,
que establece cómo se verá un elemento vacío