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

Question

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

Answer 1

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

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

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

table {
  border-spacing: 10px;
}

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

Answer 2

table { 
  border-spacing: 10px; 
} 

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

border-collapse: separate;

из моего табличного тега.

Answer 3

Шахта это:

border-spacing: 10px;
border-collapse: separate;

Answer 4

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

Answer 5

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

Answer 6

Предположим, свойство 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>

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