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

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

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

EDIT 2: нет, td padding-это не то, что мне нужно. При заполнении TD верхние и нижние прокладки соседних ячеек суммируются, поэтому между двумя ячейками есть двойное пространство (на самом деле), чем между верхней ячейкой и верхней границей таблицы. Я хочу иметь точно такое же расстояние между ними.

11 51
html css padding uicollectionviewcell tablelayout

11 ответов:

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

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

<table cellpadding="10">

или

td {
    padding: 10px;
}
38

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

23

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

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

.ablock table td {
     padding:5px;
}

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

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

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

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

4

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

свойство padding не наследуется его детьми.

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

table {
    padding: 5px;
}

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

td {
    padding: 0px;
}

EDIT: не поддерживается IE8. Извиняюсь.

2

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

1

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

1

есть еще одна фишка :

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

(только что видел его на моей текущей работе)

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