Egenskapen empty-cells

Egenskapen empty-cells anger hur webbläsaren skal visa bakgrund och kantlinje för tomma celler td eller celler th i en HTML-tabell: visa dem eller inte.

En cell anses vara tom i följande fall: det finns inga tecken alls, cellen innehåller endast mellanslag (ett eller flera), radbrytning eller tabbtecken, eller om egenskapen visibility är satt till hidden.

För att göra en cell icke-tom, men ändå utan synlig text, används följande knep: skriv ett icke-brytande mellanslag   i cellen.

Egenskapen fungerar inte om border-collapse är satt till värdet collapse.

Syntax

cssselektor {
  empty-cells: show | hide;
}

Värden

Värde Beskrivning
show Bakgrund och kantlinje visas för en tom cell.
hide Bakgrund och kantlinje visas inte för en tom cell.

Standardvärde: show.

Exempel . Värdet show

För närvarande är några celler i tabellen tomma, men de har ändå kantlinje och bakgrund:

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;
}

Результат:

Exempel . Värdet hide

Men nu kommer de tomma cellerna inte att ha bakgrund eller kantlinje:

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;
}

Результат:

Se även

  • pseudoklassen empty,
    som anger hur ett tomt element ska se ut