Svojstvo border-spacing

Svojstvo border-spacing postavlja razmak između ćelija td ili ćelija th HTML tabele (i između granice ćelije i same tabele). Vrednost svojstva su bilo koje jedinice za veličine, osim procenata.

Sintaksa

cssselektor {
  border-spacing: jedna ili dve vrednosti;
}

Vrednosti

Vrednost	Opis
jedna vrednost	Jedna vrednost postavlja jednake razmake između ćelija po vertikali i po horizontali.
dve vrednosti	Prva vrednost postavlja razmak po horizontali, a druga vrednost - razmak po vertikali.

Podrazumevana vrednost: 0. Međutim, svaki pregledač ima svoju, nenultu vrednost atributa cellspacing, pa ćete podrazumevano videti razmake između ćelija.

Napomene

Primenjujte svojstvo na tabele, a ne na njene ćelije (na ćelijama neće raditi).

Slićnog efekta ne možete postići pomoću margin, pošto margin za ćelije tabele ne funkcioniše.

Ako je postavljeno svojstvo border-collapse u vrednosti collapse - border-spacing neće raditi.

Primer . Jedna vrednost

Hajde da napravimo razmake između ćelija (i između ćelije i granice tabele) od 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;
}

Результат:

Primer . Dve vrednosti

A sada napravimo razmake od 10px po horizontali i 30px po vertikali:

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

Результат:

Primer . Postavimo border-collapse: collapse

Ali sada border-spacing neće raditi zbog svojstva border-collapse u vrednosti 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;
}

Результат: