border-spacing | CSS | WebReference

Задаёт расстояние между границами ячеек в таблице. border-spacing не работает в случае, когда для таблицы установлено свойство border-collapse со значением collapse.

Краткая информация

Значение по умолчанию0
НаследуетсяДа
ПрименяетсяК таблицам
АнимируетсяНет

Синтаксис

border-spacing: <размер> [<размер>]
Синтаксис
ОписаниеПример
<тип>Указывает тип значения.<размер>
A && BЗначения должны выводиться в указанном порядке.<размер> && <цвет>
A | BУказывает, что надо выбрать только одно значение из предложенных (A или B).normal | small-caps
A || BКаждое значение может использоваться самостоятельно или совместно с другими в произвольном порядке.
width || count
[ ]Группирует значения.[ crop || cross ]
*Повторять ноль или больше раз.[,<время>]*
+Повторять один или больше раз.<число>+
?Указанный тип, слово или группа не является обязательным.inset?
{A, B}Повторять не менее A, но не более B раз.<радиус>{1,4}
#Повторять один или больше раз через запятую.<время>#

Значения

Одно значение устанавливает одновременно расстояние по вертикали и горизонтали между границами ячеек. Если значений два, то первое определяет горизонтальное расстояние, а второе — вертикальное.

Песочница

table {
  border: 4px double #333;
  border-collapse: separate;
  width: 100%;
  border-spacing: {{ playgroundValue }}px;
}

Пример

<!DOCTYPE html> <html> <head> <meta charset=»utf-8″> <title>border-spacing</title> <style> table { border: 4px double #333; /* Рамка вокруг таблицы */ border-collapse: separate; /* Способ отображения границы */ width: 100%; /* Ширина таблицы */ border-spacing: 7px 11px; /* Расстояние между ячейками */ } td { padding: 5px; /* Поля вокруг текста */ border: 1px solid #a52a2a; /* Граница вокруг ячеек */ } </style> </head> <body> <table> <tr> <td>1</td><td>2</td> </tr> <tr> <td>3</td><td>4</td> </tr> </table> </body> </html>

Результат данного примера показан на рис. 1.

Рис. 1. Применение свойства border-spacing

Объектная модель

Объект.style.borderSpacing

Примечание

Если к элементу <table> добавлен атрибут cellspacing, то при использовании стилевого свойства border-spacing атрибут cellspacing не принимается во внимание и его значение игнорируется.

Спецификация

СпецификацияСтатус
CSS Level 2 (Revision 1)Рекомендация
Спецификация

Каждая спецификация проходит несколько стадий одобрения.

  • Recommendation (Рекомендация) — спецификация одобрена W3C и рекомендована как стандарт.
  • Candidate Recommendation (Возможная рекомендация) — группа, отвечающая за стандарт, удовлетворена, как он соответствует своим целям, но требуется помощь сообщества разработчиков по реализации стандарта.
  • Proposed Recommendation (Предлагаемая рекомендация) — на этом этапе документ представлен на рассмотрение Консультативного совета W3C для окончательного утверждения.
  • Working Draft (Рабочий проект) — более зрелая версия черновика после обсуждения и внесения поправок для рассмотрения сообществом.
  • Editor’s draft (Редакторский черновик) — черновая версия стандарта после внесения правок редакторами проекта.
  • Draft (Черновик спецификации) — первая черновая версия стандарта.

Браузеры

8121411
1161
Браузеры

В таблице браузеров применяются следующие обозначения.

  • — элемент полностью поддерживается браузером;
  • — элемент браузером не воспринимается и игнорируется;
  • — при работе возможно появление различных ошибок, либо элемент поддерживается с оговорками.

Число указывает версию браузреа, начиная с которой элемент поддерживается.

Таблицы

См. также

  • Оформление таблиц

Рецепты

  • Как установить расстояние между ячеек?

Практика

  • Расстояние между ячейками

border-spacing — расстояние между ячейками

Поддержка браузерами

12.0+ 8.0+ 1.0+ 1.0+ 4.0+ 1.0+

Описание

CSS свойство border-spacing позволяет увеличивать или уменьшать расстояние между ячейками таблицы и общей рамкой таблицы.

По умолчанию браузеры обычно оставляют небольшое пустое пространство (2px) между смежными ячейками таблицы, и, чтобы увеличивать или уменьшать его, можно использовать свойство

border-spacing. Значение этого свойства обычно задается в пикселях. Можно указать два значения, если нужно отдельно настроить горизонтальное и вертикальное расстояние.

Если для ячеек таблицы задана рамка, то в местах соприкосновения ячеек линия будет в 2 раза толще, чем по краям таблицы. Чтобы предотвратить это, следует воспользоваться CSS свойством border-collapse.

Значение по умолчанию: 2px
Применяется: к table и inline-table элементам
Анимируется: да
Наследуется: да
Версия: CSS2
Синтаксис JavaScript: object.style.borderSpacing=»15px»

Синтаксис

border-spacing: расстояние|inherit;

Значения свойства

Значение Описание
расстояние Указывает расстояние между рамками смежных ячеек и общей рамкой таблицы в единицах измерения CSS.
  • Если указано только одно значение, оно определяет расстояние, как по вертикали так и по горизонтали.
  • Если указано два значения, первое устанавливает расстояние по горизонтали, второе по вертикале.
inherit Указывает, что значение наследуется от родительского элемента.

Пример

border-spacing:

0px

1px

2px

5px

10px

50px

0px 50px

1px 5px

5px 1px

10px 0px

30px 50px

Ячейка таблицы Ячейка таблицы
Ячейка таблицы Ячейка таблицы

table#myTable {
border-spacing: 0px;
}

html — Поле ячейки CSS

спросил

Изменено 4 месяца назад

Просмотрено 456 тысяч раз

В моем HTML-документе есть таблица с двумя столбцами и несколькими строками.

Как увеличить расстояние между первым и вторым столбцами с помощью css? Я пытался применить «margin-right: 10px;» в каждую из ячеек с левой стороны, но безрезультатно.

  • html
  • css
  • ячейка
  • поля
  • css-таблицы

1

Предупреждение: хотя padding-right может решить вашу конкретную (визуальную) проблему, это неправильный способ добавления интервала между ячейками таблицы. То, что padding-right

делает для ячейки, похоже на то, что оно делает для большинства других элементов: добавляет пробел в ячейку. Если у ячеек нет границы или цвета фона или чего-то еще, что выдает игру, это может имитировать эффект установки пространства между ячейками, но не иначе.

Как кто-то заметил, спецификации полей игнорируются для ячеек таблицы:

Спецификация CSS 2.1 — Таблицы — Визуальное расположение содержимого таблицы

Внутренние элементы таблицы генерируются прямоугольные коробки с содержимым и границы. Ячейки также имеют отступы. Внутренние табличные элементы не имеют поля.

Что тогда «правильно»? Если вы хотите заменить атрибут таблицы CellsPacing , то border-spacing (с border-collapse отключено) это замена. Однако, если требуются «поля» для каждой ячейки, я не уверен, как этого можно добиться с помощью CSS. Единственный хак, о котором я могу думать, — это использовать padding , как указано выше, избегать любого стиля ячеек (цвета фона, границы и т. д.) и вместо этого использовать контейнерные DIV внутри ячеек для реализации такого стиля.

Я не эксперт по CSS, поэтому вполне могу ошибаться в приведенном выше (что было бы здорово знать! Я тоже хотел бы CSS-решение для поля ячейки таблицы).

3

Примените это к вашему первому :

 padding-right:10px;

Пример HTML: 

 <таблица>
   
      данные
      больше данных

5

Если вы не можете использовать отступы (например, у вас есть границы в td), попробуйте это

 таблица {
           граница-коллапс: раздельная;
           интервал между границами: 2px;
}

1

Я понимаю, что это довольно запоздало, но для записи вы также можете использовать селекторы CSS для этого (устраняя необходимость во встроенных стилях). Этот CSS применяет отступы к первому столбцу каждой строки:

 table > tr > td:first-child { padding-right:10px }

И это будет ваш HTML без CSS!:

 
данныебольше данных

Это позволяет делать гораздо более элегантную разметку, особенно в тех случаях, когда вам нужно выполнить много специфического форматирования с помощью CSS.

поле, к сожалению, не работает в отдельных ячейках, однако вы можете добавить дополнительные столбцы между двумя ячейками, между которыми вы хотите поставить пробел… другой вариант — использовать рамку того же цвета, что и фон…

1

Вы можете просто сделать это:

 
<таблица>
    
        один
        <тд>
        два

CSS не требуется 🙂 Эти 10 пикселей — ваше пространство.

5

Попробуйте padding-right . Вам не разрешено помещать полей между ячейками.

 <таблица>
   
      один
      два

Использование border-collapse: отдельно; у меня не сработало, потому что мне нужно только поле между ячейками таблицы, а не по бокам таблицы.

Я придумал следующее решение:

— CSS 

 .tableDiv{
    дисплей: таблица;
}
.cellSeperator {
    отображение: таблица-ячейка;
    ширина: 20 пикселей;
}
.cell1 {
    отображение: таблица-ячейка;
    ширина: 200 пикселей;
}
.cell2 {
    отображение: таблица-ячейка;
    ширина: 50 пикселей;
}

— HTML 

 <дел>
    <дел>
    <дел>
    <дел>

Это решение работает для td , которым нужны как граница , так и отступ для стиля.
(проверено на Chrome 32, IE 11, Firefox 25)

 CSS:
таблица {граница-коллапс: отдельная; расстояние между границами: 0; } /* нужен отдельный */
td { дисплей: встроенный блок; width: 33% } /* Firefox нужен встроенный блок + ширина */
td { position: relative } /* необходимо для перемещения td */
тд { слева: 10px; } /* сдвинуть все 10px */
td:first-child {слева: 0px; } /* вернуться на первые 10 пикселей */
td: nth-child (3) { слева: 20px; } /* отодвигаем 3:rd еще на 10 пикселей */
/* для поддержки старых браузеров нам нужен класс для td, который мы хотим отправить
    td. col1 {слева: 0px; }
    td.col2 {слева: 10px; }
    td.col3 {слева: 20px; }
*/
HTML:
<таблица>
    
        Игрок
        Результат
        Среднее

Обновлено 2016

Firefox теперь поддерживает его без встроенного блока и набора ширины 

 table {border-collapse: отдельной; расстояние между границами: 0; }
td { позиция: относительная; отступ: 5px; }
тд { слева: 10px; }
td:first-child {слева: 0px; }
td: nth-child (3) { слева: 20px; }
td {граница: 1px сплошной серый; }


/* Таблица CSS */
.таблица {отображение: таблица; }
.tr { отображение: таблица-строка; }
.td { отображение: таблица-ячейка; }

.table {граница-коллапс: отдельно; расстояние между границами: 0; }
.td { позиция: относительная; отступ: 5px; }
.td {слева: 10px; }
.td:first-child { слева: 0px; }
.td:nth-child(3) { слева: 20px; }
.td {граница: 1px сплошной серый; } 
 <таблица>
  
    Игрок
    Результат
    Среднее
  


<дел>
  <дел>
    
Игрок

    
Результат

    
Среднее