Додайте простір між комірками (td), використовуючи css

89

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

html css

— Амра
джерело

2

можливий дублікат Як встановити padpad і CellSpace в CSS?

— користувач

115

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

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

Або десь у блоці CSS:

table {
  border-spacing: 10px;
}

Див. Примхливий режим на border-spacing. Майте на увазі, що border-spacingне працює на IE7 і нижче.

— Домінік Роджер
джерело

2

в IE7 і нижче ви можете використовувати атрибут Cellpacing у тезі таблиці. Ви можете поставити обидва, щоб він працював і в IE. Інші браузери надаватимуть пріоритет стилю.

— Tor Valamo

36

table { 
  border-spacing: 10px; 
}

Це спрацювало для мене, коли я видалив

border-collapse: separate;

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

— Келлі
джерело

1

окремі замість окремих, але мені це допомогло :-)

— FredRoger

Ага, не знав, що вам також довелося змінити "обвал кордону". Це повинна бути правильна відповідь.

— jleggio

30

Моє:

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

— ЯнБоруп
джерело

мені потрібно додати властивість css boder-kolaps, щоб поле вплинуло. спасибі

— ufk

4

Подумайте про використання cellspacingта cellpaddingатрибути для властивості tabletag або border-spacingcss.

— Книгапольке
джерело

4

Параметр cellpacing (відстань між комірками) тегу 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;">

— obliviJohn
джерело