CSS - celda vacía

Descripción

La propiedad de celda vacía se usa en el modelo de diseño de tabla de borde separado para controlar la representación de celdas de tabla que no tienen contenido visible.

Valores posibles

show - Se renderizan los bordes de una celda vacía.
hide - No se dibujan los bordes de una celda vacía.

Se aplica a

Todos los elementos con una pantalla de celda de tabla.

Sintaxis DOM

object.style.emptyCell = "hide";

Ejemplo

Aquí está la propiedad de celdas vacías que se usa para ocultar los bordes de las celdas vacías en el elemento <table>.

<html>
   <head>
      <style type = "text/css">
         table.empty {
            width:350px;
            border-collapse:separate;
            empty-cells:hide;
         }
         td.empty {
            padding:5px;
            border-style:solid;
            border-width:1px;
            border-color:#999999;
         }
      </style>
   </head>

   <body>
      <table class = "empty">
         <tr>
            <th></th>
            <th>Title one</th>
            <th>Title two</th>
         </tr>
      
         <tr>
            <th>Row Title</th>
            <td class = "empty">value</td>
            <td class = "empty">value</td>
         </tr>
      
         <tr>
            <th>Row Title</th>
            <td class = "empty">value</td>
            <td class = "empty"></td>
         </tr>
      </table>
   </body>
</html>

Esto producirá el siguiente resultado:

↰ Previous page