CSS: Свойство border-spacing

Технические моменты создания сайтов и других Web-приложений.

CSS: Свойство border-spacing

Сообщение Александр » 17 сен 2013, 16:30

Данное свойство отвечает за отображение расстояния между ячейками таблицы. Стоит отметить, что данное свойство не будет работать если установлено свойство border-collapse со значением collapse.
Пример кода:
Код: выделить все
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
 <head>
  <meta charset="utf-8">
  <title>Свойство border-spacing</title>
  <style>
   table {
    border: 4px solid #999; /* Рамка вокруг таблицы */
    border-collapse: separate; /* Способ отображения границы */
    width: 80%; /* Ширина таблицы */
    border-spacing: 5px 8px; /* Расстояние между ячейками */
   }
   td {
    padding: 15px; /* Поля вокруг текста */
    border: 1px dashid #e41e3e; /* Граница вокруг ячеек */
   }
  </style>
 </head>
 <body>
  <table>
   <tr>
    <td>A</td><td>B</td>
   </tr>
   <tr>
    <td>C</td><td>D</td>
   </tr>
  </table>
 </body>
</html>

Результатом данного примера будет:
bs.png
Изменение расстояния между ячейками таблицы
bs.png (7.75 KiB) Просмотров: 2877
Аватар пользователя
Александр
Продвинутый Юзер
 
Сообщений: 218
Зарегистрирован: 12 мар 2012, 16:32

Вернуться в Программирование для Web

Кто сейчас на форуме

Сейчас этот форум просматривают: нет зарегистрированных пользователей и гости: 2

cron