Добавьте пробел между ячейками (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;">

— обливиДжон
источник