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


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

6 76

6 ответов:

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

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

или в блоке CSS где-то:

table {
  border-spacing: 10px;
}

посмотреть quirksmode on border-spacing. Знайте, что border-spacing не работает на IE7 и ниже.

table { 
  border-spacing: 10px; 
} 

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

border-collapse: separate;

из моего тега table.

мое:

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

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

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

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

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