CSS - cella vuota

Descrizione

La proprietà cella vuota viene utilizzata nel modello di layout della tabella con bordi separati per controllare il rendering delle celle della tabella che non hanno contenuto visibile.

Possibili valori

  • show - Viene eseguito il rendering dei bordi di una cella vuota.

  • hide - I bordi di una cella vuota non vengono disegnati.

Si applica a

Tutti gli elementi con una visualizzazione della tabella-cella.

Sintassi DOM

object.style.emptyCell = "hide";

Esempio

Ecco la proprietà celle vuote utilizzata per nascondere i bordi delle celle vuote nell'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>

Questo produrrà il seguente risultato: