A border-spacing tulajdonság

A border-spacing tulajdonság a td cellák vagy th cellák közötti távolságot határozza meg a HTML táblázatban (és a cella széle és a táblázat közötti távolságot is). A tulajdonság értéke bármilyen mértékegység lehet, kivéve százalékot.

Szintaxis

cssszelektor {
  border-spacing: egy vagy két érték;
}

Értékek

Érték	Leírás
egy érték	Egy érték meghatározza a cellák közötti azonos távolságot függőlegesen és vízszintesen.
két érték	Az első érték a vízszintes távolságot, a második érték pedig a függőleges távolságot határozza meg.

Alapértelmezett érték: 0. Azonban minden böngészőnek saját, nem nulla értéke van a cellspacing attribútumnak, ezért alapértelmezés szerint távolságot fog látni a cellák között.

Megjegyzések

A tulajdonságot a táblázatra alkalmazza, nem pedig annak celláira (a cellákra nem fog működni).

Hasonló hatást nem lehet elérni a margin használatával, mivel a margin nem működik a táblázat celláin.

Ha a border-collapse tulajdonság collapse értékre van állítva - a border-spacing nem fog működni.

Példa . Egy érték

Állítsuk be a cellák közötti távolságot (és a cella és a táblázat széle közötti távolságot) 10px-re:

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élda . Két érték

Most állítsuk be a vízszintes távolságot 10px-re és a függőleges távolságot 30px-re:

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élda . Beállítjuk a border-collapse: collapse értéket

Most a border-spacing nem fog működni a border-collapse tulajdonság miatt, ami collapse értékre van állítva:

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

Результат: