Właściwość border-spacing

Właściwość border-spacing ustawia odstęp między komórkami td lub komórkami th tabeli HTML (oraz między granicą komórki a samą tabelą). Wartością właściwości są dowolne jednostki wymiaru, z wyjątkiem procentów.

Składnia

cssselektor {
  border-spacing: jedna lub dwie wartości;
}

Wartości

Wartość	Opis
jedna wartość	Jedna wartość ustawia te same odstępy między komórkami w pionie i w poziomie.
dwie wartości	Pierwsza wartość ustawia odstęp w poziomie, a druga wartość - odstęp w pionie.

Wartość domyślna: 0. Jednakże, każda przeglądarka ma swoją, niezerową wartość atrybutu cellspacing, dlatego domyślnie zobaczysz odstępy między komórkami.

Uwagi

Stosuj właściwość do tabel, a nie do jej komórek (dla komórek nie zadziała).

Podobnym efektem nie można osiągnąć za pomocą margin, ponieważ margin dla komórek tabeli nie działa.

Jeśli ustawiono właściwość border-collapse na wartość collapse - border-spacing nie będzie działać.

Przykład . Jedna wartość

Zróbmy odstępy między komórkami (oraz między komórką a granicą tabeli) równe 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;
}

Результат:

Przykład . Dwie wartości

A teraz zróbmy odstępy równe 10px w poziomie i 30px w pionie:

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

Результат:

Przykład . Ustawiamy border-collapse: collapse

A teraz border-spacing nie będzie działać z powodu właściwości border-collapse ustawionej na wartość 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;
}

Результат: