Egenskapen border-spacing

Egenskapen border-spacing setter avstand mellom celler av td eller celler av th i en HTML tabell (og mellom cellens grense og selve tabellen). Verdien til egenskapen er alle enheter for størrelser, bortsett fra prosent.

Syntaks

cssvelger {
  border-spacing: én eller to verdier;
}

Verdier

Verdi	Beskrivelse
én verdi	Én verdi setter samme avstand mellom cellene vertikalt og horisontalt.
to verdier	Den første verdien setter avstanden horisontalt, og den andre verdien - avstanden vertikalt.

Standardverdi: 0. Imidlertid, har hver nettleser sin egen, ikke-null verdi for attributtet cellspacing, så som standard vil du se avstander mellom cellene.

Merknader

Bruk egenskapen for tabeller, ikke for dens celler (det vil ikke fungere for celler).

Tilsvarende effekt kan ikke oppnås ved hjelp av margin, siden margin for tabellceller ikke fungerer.

Hvis egenskapen border-collapse er satt til verdien collapse - vil border-spacing ikke fungere.

Eksempel . Én verdi

La oss lage avstander mellom cellene (og mellom cellen og tabellens grense) på 10px:

html<table>
  <tr>
    <td>1</td>
    <td>2</td>
    <td>3</td>
  </tr>
  <tr>
    <td>4</td>
    <td>5</td>
    <td>6</td>
  </tr>
  <tr>
    <td>7</td>
    <td>8</td>
    <td>9</td>
  </tr>
</table>

csstable {
  border-spacing: 10px;
  border-collapse: separate;
  width: 400px;
  border: 1px solid red;
}
td {
  border: 1px solid red;
  text-align: center;
}

Результат:

Eksempel . To verdier

Og nå lager vi avstander på 10px horisontalt og 30px vertikalt:

html<table>
  <tr>
    <td>1</td>
    <td>2</td>
    <td>3</td>
  </tr>
  <tr>
    <td>4</td>
    <td>5</td>
    <td>6</td>
  </tr>
  <tr>
    <td>7</td>
    <td>8</td>
    <td>9</td>
  </tr>
</table>

csstable {
  border-spacing: 10px 30px;
  border-collapse: separate;
  width: 400px;
  border: 1px solid red;
}
td {
  border: 1px solid red;
  text-align: center;
}

Результат:

Eksempel . Setter border-collapse: collapse

Men nå vil border-spacing ikke fungere på grunn av egenskapen border-collapse med verdien collapse:

html<table>
  <tr>
    <td>1</td>
    <td>2</td>
    <td>3</td>
  </tr>
  <tr>
    <td>4</td>
    <td>5</td>
    <td>6</td>
  </tr>
  <tr>
    <td>7</td>
    <td>8</td>
    <td>9</td>
  </tr>
</table>

csstable {
  border-collapse: collapse;
  border-spacing: 10px 30px;
  width: 400px;
  border: 1px solid red;
}
td {
  border: 1px solid red;
  text-align: center;
}

Результат: