Az empty-cells tulajdonság

A empty-cells tulajdonság megadja a böngészőnek, hogyan jelenítse meg a HTML táblázat üres td celláinak vagy th celláinak a hátterét és szegélyét: mutassa vagy ne.

Egy cella akkor tekinthető üresnek a következő esetekben: egyetlen karakter sincs benne, a cella csak szóközt (egy vagy több), sortörést vagy tabulátor karaktert tartalmaz, vagy a visibility tulajdonság hidden értékre van állítva.

Ahhoz, hogy egy cella ne legyen üres, de látható szöveg nélkül, a következő trükköt alkalmazzák: a cellába egy nem törhető szóközt   írnak.

A tulajdonság nem működik, ha a border-collapse collapse értékre van állítva.

Szintaxis

cssszelektor {
  empty-cells: show | hide;
}

Értékek

Alapértelmezett érték: show.

Példa . Show érték

Jelenleg a táblázatban néhány cella üres, de mindegyiknek van szegélye és háttere:

html<table>
  <tr>
    <td>cell</td>
    <td></td>
    <td>cell</td>
  </tr>
  <tr>
    <td></td>
    <td>cell</td>
    <td></td>
  </tr>
  <tr>
    <td>cell</td>
    <td>cell</td>
    <td>cell</td>
  </tr>
</table>

csstable {
  width: 400px;
  empty-cells: show;
}
td {
  border: 1px solid black;
  background-color: #f3f3f3;
  text-align: center;
}

Результат:

Példa . Hide érték

Most viszont az üres celláknak nem lesz háttérszíne és szegélye:

html<table>
  <tr>
    <td>cell</td>
    <td></td>
    <td>cell</td>
  </tr>
  <tr>
    <td></td>
    <td>cell</td>
    <td></td>
  </tr>
  <tr>
    <td>cell</td>
    <td>cell</td>
    <td>cell</td>
  </tr>
</table>

csstable {
  width: 400px;
  empty-cells: hide;
}
td {
  border: 1px solid black;
  background-color: #f3f3f3;
  text-align: center;
}

Результат:

Lásd még