Vlastnost border-spacing

Vlastnost border-spacing nastavuje mezery mezi buňkami td nebo buňkami th HTML tabulky (a mezi okrajem buňky a samotnou tabulkou). Hodnotou vlastnosti jsou libovolné jednotky pro velikosti, kromě procent.

Syntaxe

cssselektor {
  border-spacing: jedna nebo dvě hodnoty;
}

Hodnoty

Hodnota	Popis
jedna hodnota	Jedna hodnota nastavuje stejné mezery mezi buňkami vertikálně i horizontálně.
dvě hodnoty	První hodnota nastavuje horizontální mezeru a druhá hodnota - vertikální mezeru.

Výchozí hodnota: 0. Nicméně, každý prohlížeč má svou vlastní, nenulovou hodnotu atributu cellspacing, proto ve výchozím nastavení uvidíte mezery mezi buňkami.

Poznámky

Aplikujte vlastnost na tabulky, nikoli na její buňky (na buňky nebude fungovat).

Stejného efektu nelze dosáhnout pomocí margin, protože margin pro buňky tabulky nefunguje.

Pokud je nastavena vlastnost border-collapse s hodnotou collapse - border-spacing nebude fungovat.

Příklad . Jedna hodnota

Nastavme mezery mezi buňkami (a mezi buňkou a okrajem tabulky) na 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;
}

Результат:

Příklad . Dvě hodnoty

A nyní nastavme mezery na 10px horizontálně a 30px vertikálně:

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

Результат:

Příklad . Nastavíme border-collapse: collapse

A nyní border-spacing nebude fungovat 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;
}

Результат: