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

Question

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

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

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

Answer 1

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

Способ css: интервал границы (не поддерживается 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;
}

Answer 2

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

Answer 3

Вот что вы должны понимать о таблицах ... Они не являются деревом вложенных независимых элементов. Они один составной элемент. В то время как отдельные 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>

Answer 4

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

.ablock table td {
     padding:5px;
}

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

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

Answer 5

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

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

Answer 6

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

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

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

table {
    padding: 5px;
}

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

td {
    padding: 0px;
}

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

Answer 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; }

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

Answer 8

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

Answer 9

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

Answer 10

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