4

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?

1 respuesta 1

5

Como el tbody lo tienes vacío puedes hacer que se comporte como un caption (título de tabla) y establecerlo al fondo de la tabla. De esta manera, dará la sensación de que todo el contenido de la tabla es un texto.

Esto lo conseguirás con estas dos propiedades:

display: table-caption;
caption-side: bottom;

Tu ejemplo modificado:

table > tbody:empty {
    position: relative;
    display: table-caption;
    caption-side: bottom;
    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>
    </thead>
    <tbody></tbody>
</table>

1
  • 1
    Excelente. Funcionó.
    – farsSharp
    Commented el 18 oct. 2018 a las 18:14

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.