Vlastnosť border-spacing

Vlastnosť border-spacing nastavuje odstup medzi bunkami td alebo bunkami th HTML tabuľky (a medzi hranicou bunky a samotnej tabuľky). Hodnotou vlastnosti sú ľubovoľné jednotky pre veľkosti, okrem percent.

Syntax

cssselektor {
  border-spacing: jedna alebo dve hodnoty;
}

Hodnoty

Hodnota	Popis
jedna hodnota	Jedna hodnota nastavuje rovnaké odsupy medzi bunkami zvisle aj vodorovne.
dve hodnoty	Prvá hodnota nastavuje odstup vodorovne, a druhá hodnota - odstup zvisle.

Predvolená hodnota: 0. Avšak, každý prehliadač má svoju, nenulovú hodnotu atribútu cellspacing, preto predvolene uvidíte odsupy medzi bunkami.

Poznámky

Aplikujte vlastnosť pre tabuľky, a nie pre jej bunky (pre bunky nebude fungovať).

Podobného efektu nemožno dosiahnuť pomocou margin, pretože margin pre bunky tabuľky nefunguje.

Ak je nastavená vlastnosť border-collapse s hodnotou collapse - border-spacing nebude fungovať.

Príklad . Jedna hodnota

Urobme odsupy medzi bunkami (a medzi bunkou a hranicou tabuľky) v 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;
}

Результат:

Príklad . Dve hodnoty

A teraz urobme odsupy v 10px vodorovne a 30px zvisle:

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

Результат:

Príklad . Nastavíme border-collapse: collapse

A teraz border-spacing nebude fungovať kvôli vlastnosti border-collapse s hodnotou 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;
}

Результат: