it-swarm.com.ru

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

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

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

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

52
Petruza

Самый простой/лучший поддерживаемый метод - использовать <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;
}
39
Rob

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

24
Frank Schwieterman

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

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

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

5
Seb

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

.ablock table td {
     padding:5px;
}

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

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

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

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

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

table {
    padding: 5px;
}

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

td {
    padding: 0px;
}

Правка: Не поддерживается IE8. Сожалею.

2
MPelletier

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

1
Vincent Ramdhanie

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

/* 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
Offirmo

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

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