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

У меня есть таблица с цветным фоном, и мне нужно указать отступы между таблицей и ее содержимым, I.E. клетки.
Тег таблицы, похоже, не принимает значение прокладки.
Firebug показывает таблицу и форму тета с заполнением 0, но не принимает значения, введенные для них, поэтому я думаю, что они просто не имеют свойства заполнения.
Но дело в том, что я хочу одно и то же разделение между ячейками, чем верхние ячейки со столом и нижними ячейками со столом внизу.
Опять же, то, что я хочу, не является добавлением ячеек.

EDIT: Спасибо, что мне действительно нужно, я понимаю теперь, был пограничный интервал или его эквивалент html, cellpacing.
Но по какой-то причине они ничего не делают на сайте, над которым я работаю.
Оба работают отлично на отдельном HTML, но на сайте они этого не делают.
Я думал, что это может быть какой-то стиль, переписывающий свойство, но привязка к ячейкам и встроенный интервал между границами не должны быть перезаписаны, верно?
(Я использую firefox)

РЕДАКТИРОВАТЬ 2: Нет, TD padding - это НЕ то, что мне нужно. С TD padding, верхняя и нижняя прокладки смежных ячеек суммируются, так что в два раза меньше места (накладка) между двумя ячейками, чем между верхней ячейкой и верхней границей таблицы. Я хочу иметь точно такое же расстояние между ними.

Ответы

Ответ 1

Самый простой/наилучший способ - использовать <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>

Ответ 2

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

Ответ 3

Вот что вы должны понимать о таблицах... Они не являются деревом вложенных независимых элементов. Они представляют собой единый составной элемент. В то время как отдельные TDs ведут себя более или менее подобно элементам блока CSS, промежуточный материал (что-либо между TABLE и TD, включая TRs и TBODY) является неделимым и не попадает ни в встроенный, ни блок. Никакие случайные элементы 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>

Ответ 4

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

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

Ответ 5

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

.ablock table td {
     padding:5px;
}

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

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

Ответ 6

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

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

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

table {
    padding: 5px;
}

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

td {
    padding: 0px;
}

EDIT: Не поддерживается IE8. К сожалению.

Ответ 7

Существует еще один трюк:

/* 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; }

(Просто посмотрел на мою текущую работу)

Ответ 8

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

Ответ 9

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

Ответ 10

table {
    border: 1px solid transparent;
}

Ответ 11

table {
    background: #fff;
    box-shadow: 0 0 0 10px #fff;
    margin: 10px;
    width: calc(100% - 20px); 
}

Ответ 12

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.