Добавьте пробел между ячейками (td) с помощью css

90

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

html css Амра
источник
2
возможный дубликат Как установить заполнение ячеек и расстояние между ячейками в CSS?
пользователь

Ответы:

116

Вы хотите border-spacing:

<table style="border-spacing: 10px;">

Или где-нибудь в блоке CSS:

table {
  border-spacing: 10px;
}

Смотрите quirksmode на border-spacing. Имейте в виду, что border-spacingне работает в IE7 и ниже.

Доминик Роджер
источник
2
в IE7 и ниже вы можете использовать атрибут cellspacing в теге table. Вы можете поставить оба, чтобы он работал и в IE. Другие браузеры отдают предпочтение стилю.
Тор Валамо
36 
table { 
  border-spacing: 10px; 
}

Это сработало для меня, когда я удалил 

border-collapse: separate;

из моего тега таблицы.

Келли
источник
1
раздельно, а не отдельно, но мне это помогло :-)
FredRoger
Ага, не знал, что нужно менять и «пограничный коллапс». Это должен быть правильный ответ.
jleggio
31

Мой:

border-spacing: 10px;
border-collapse: separate;
JanBorup
источник
1
Мне нужно добавить свойство css boder-collapse, чтобы поле подействовало. спасибо
ufk
4

Рассмотрите возможность использования cellspacingи cellpaddingатрибуты для tableтега или border-spacingCSS свойства.

Книганаполке
источник
4

cellspacing (расстояние между ячейками) тега TABLE именно то, что вам нужно. Недостатком является то, что это одно значение, используемое как для x, так и для y, вы не можете выбрать разные интервалы или отступы по вертикали / горизонтали. Также есть свойство CSS, но оно широко не поддерживается.

SF.
источник
2

Предположим, что свойство cellspcing/ cellpadding/ border-spacingне сработало, вы можете использовать следующий код.

<div class="form-group">
  <table width="100%" cellspacing="2px" style="border-spacing: 10px;">
    <tr>                        
      <td width="47%">
        <input type="submit" class="form-control btn btn-info" id="submit" name="Submit" />
      </td>
      <td width="5%"></td>
      <td width="47%">
        <input type="reset" class="form-control btn btn-info" id="reset" name="Reset" />
      </td>
    </tr>
  </table>
</div>

Я пробовал и добился успеха, разделив кнопку, используя ширину таблицы и сделав пустой td как 2 или 1%, он не возвращает больше разных.

Баран
источник
0

Если вам нужны отдельные значения для сторон и сверху-снизу.

<table style="border-spacing: 5px 10px;">
обливиДжон
источник