Как указать заполнение таблицы в CSS? (таблица, а не заполнение ячеек)

Самый простой / лучший поддерживаемый метод - использовать <table cellspacing="10">

Способ css: border-spacing (не поддерживается IE, я не думаю)

    <!-- works in firefox, opera, safari, chrome -->
    <style type="text/css">
    
    table.foobar {
    	border: solid black 1px;
    	border-spacing: 10px;
    }
    table.foobar td {
    	border: solid black 1px;
    }
    
    
    </style>
    
    <table class="foobar" cellpadding="0" cellspacing="0">
    <tr><td>foo</td><td>bar</td></tr>
    </table>

Изменить: если вы просто хотите заполнить содержимое ячейки, а не пространство, вы можете просто использовать

<table cellpadding="10">

OR

td {
    padding: 10px;
}

Вы можете установить запас для таблицы. В качестве альтернативы оберните таблицу в div и используйте отступы div.

Вот что вам следует понять о таблицах ... Это не дерево вложенных независимых элементов. Они представляют собой единый составной элемент. В то время как отдельные TD ведут себя более или менее как блочные элементы CSS, промежуточные элементы (все, что находится между TABLE и TD, включая TR и TBODY) неделимы и не попадают ни в inline, ни в блокировать. Никакие случайные HTML-элементы не допускаются в этом многомерном пространстве, и размер такого другого многомерного пространства вообще не настраивается с помощью CSS. Только свойство HTML cellspacing может даже получить доступ к нему, и это свойство не имеет аналогов в CSS.

Итак, чтобы решить вашу проблему, я бы предложил либо оболочку DIV, как предлагает другой плакат, либо, если вам абсолютно необходимо сохранить ее в таблице, у вас есть этот уродливый мусор:

<style>
    .padded tr.first td { padding-top:10px; }
    .padded tr.last td { padding-bottom:10px; }
    .padded td.first { padding-left:10px; }
    .padded td.last { padding-right:10px; }
</style>

<table class='padded'>
    <tr class='first'>
        <td class='first'>a</td><td>b</td><td class='last'>c</td>
    </tr>
    <tr>
        <td class='first'>d</td><td>e</td><td class='last'>f</td>
    </tr>
    <tr class='last'>
        <td class='first'>g</td><td>h</td><td class='last'>i</td>
    </tr>
</table>

Вы не можете ... Может, если вы разместили картинку желаемого эффекта, есть другой способ его добиться.

Например, вы можете обернуть всю таблицу в DIV и установить отступ в div.

Забавно, я вчера делал именно это. Вам просто нужно это в вашем файле css

.ablock table td {
     padding:5px;
}

затем оберните таблицу в подходящий div

<div class="ablock ">
<table>
  <tr>
    <td>

С помощью css таблица может иметь заполнение независимо от ее ячеек.

Свойство padding не наследуется его дочерними элементами.

Итак, определяя:

table {
    padding: 5px;
}

Должно сработать. Вы также можете специально указать браузеру, как заполнять (или, в данном случае, не заполнять) ваши ячейки.

td {
    padding: 0px;
}

РЕДАКТИРОВАТЬ: не поддерживается IE8. Извините.

Есть еще одна хитрость:

/* Padding on the sides of the table */
table th:first-child, .list td:first-child { padding-left: 28px; }
table th:last-child, .list td:last-child { padding-right: 28px; }

(Только что видел это на моей нынешней работе)

Вы можете попробовать свойство border-spacing. Это должно делать то, что вы хотите. Но вы можете захотеть увидеть этот ответ.

CSS на самом деле не позволяет делать это на уровне таблицы. Обычно я указываю cellspacing="3", когда хочу добиться этого эффекта. Очевидно, что это не решение css, так что принимайте его за то, что оно стоит.

table.foobar
{
   padding:30px; /* if border is not collapsed */
}

or 

table.foobar
{
   border-spacing:0;
}
table.foobar>tbody
{
   display:table;
   border-spacing:0; /* or other preferred */
   border:30px solid transparent; /* 30px is the "padding" */
}

Работает в Firefox, Chrome, IE11, Edge.