Savybė border-spacing

Savybė border-spacing nustato atstumą tarp td langelių arba th langelių HTML lentelės (ir tarp langelių ir pačios lentelės). Savybės reikšmė gali būti bet kuris dydžio vienetas, išskyrus procentus.

Sintaksė

cssselektorius {
  border-spacing: viena ar dvi reikšmės;
}

Reikšmės

Reikšmė	Aprašas
viena reikšmė	Viena reikšmė nustato vienodus atstumus tarp langelių vertikaliai ir horizontaliai.
dvi reikšmės	Pirmoji reikšmė nustato atstumą horizontaliai, o antroji reikšmė - atstumą vertikaliai.

Numatytoji reikšmė: 0. Tačiau, kiekviena naršyklė turi savo, nulinę reikšmę atributui cellspacing, taigi pagal nutylėjimą pamatysite tarpus tarp langelių.

Pastabos

Taikykite savybę lentelėms, o ne jos langeliams (langeliams neveiks).

Panašaus efekto negalima pasiekti naudojant margin, nes margin lentelės langeliams neveikia.

Jei nustatyta savybė border-collapse reikšmėje collapse - border-spacing neveiks.

Pavyzdys . Viena reikšmė

Padarykime atstumus tarp langelių (ir tarp langelio ir lentelės) 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;
}

Результат:

Pavyzdys . Dvi reikšmės

Dabar padarykime atstumus 10px horizontaliai ir 30px vertikaliai:

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

Результат:

Pavyzdys . Nustatome border-collapse: collapse

Dabar border-spacing nebeveiks dėl savybės border-collapse reikšmėje 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;
}

Результат: