Својство border-spacing

Својство border-spacing поставља размак између ћелија td или ћелија th HTML табеле (и између границе ћелије и саме табеле). Вредност својства су било које јединице за величине, осим процената.

Синтакса

cssселектор {
  border-spacing: једна или две вредности;
}

Вредности

Вредност	Опис
једна вредност	Једна вредност поставља једнаке размаке између ћелија по вертикали и по хоризонтали.
две вредности	Прва вредност поставља размак по хоризонтали, а друга вредност - размак по вертикали.

Подразумевана вредност: 0. Међутим, сваки прегледач има своју, ненулту вредност атрибута cellspacing, па ћете подразумевано видети размаке између ћелија.

Напомене

Примењујте својство за табеле, а не за њене ћелије (за ћелије неће радити).

Сличан ефекат није могуће постићи помоћу margin, јер margin за ћелије табеле не ради.

Ако је постављено својство border-collapse у вредности collapse - border-spacing неће радити.

Пример . Једна вредност

Хајде да направимо размаке између ћелија (и између ћелије и границе табеле) од 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;
}

Результат:

Пример . Две вредности

А сада направимо размаке од 10px по хоризонтали и 30px по вертикали:

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

Результат:

Пример . Поставимо border-collapse: collapse

А сада border-spacing неће радити због својства border-collapse у вредности 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;
}

Результат: