Quiero mostrar un mensaje cuando la tabla esté vacía, por medio de css.
table > tbody:empty {
position: relative;
display: block;
min-height: 50px;
background-color: rgb(240,240,240);
text-align: center;
}
table > tbody:empty:before {
content: 'SIN DATOS';
position: absolute;
font-size: 12px;
left: 0;
right: 0;
top: 50%;
transform: translateY(-50%);
}
<table>
<thead>
<tr>
<th>Lugar</th>
<th>Número</th>
<th>Persona</th>
<th>Fecha</th>
</tr>
<tbody></tbody>
</thead>
</table>
Es solo que tbody toma el width de la primer columna. ¿Cómo puedo hacerlo que tome todas las columnas?