Возможно ли это с помощью CSS?
Я пытаюсь
tr.classname {
border-spacing: 5em;
}
безрезультатно. Может быть, я делаю что-то не так?
Вам нужно использовать прокладку на ваших элементах td
. Нечто подобное должно помочь. Вы можете, конечно, получить тот же результат, используя верхнюю прокладку вместо нижней прокладки.
В приведенном ниже коде CSS знак «больше, чем» означает, что заполнение применяется только к элементам td
, которые являются прямыми дочерними элементами к элементам tr
с классом spaceUnder
. Это позволит использовать вложенные таблицы. (Сотовый C и D в примере кода.) Я не слишком уверен в поддержке браузера для прямого селектора детей (например, IE 6), но это не должно нарушать код в любых современных браузерах.
& Лт;!- начать фрагмент: js hide: ложная консоль: истинная павиана: false - >
/* Apply padding to td elements that are direct children of the tr elements with class spaceUnder. */
tr.spaceUnder>td {
padding-bottom: 1em;
}
<table>
<tbody>
<tr>
<td>A</td>
<td>B</td>
</tr>
<tr class="spaceUnder">
<td>C</td>
<td>D</td>
</tr>
<tr>
<td>E</td>
<td>F</td>
</tr>
</tbody>
</table>
& Лт;!- конец фрагмента - >
Это должно быть несколько похоже на это:
+---+---+
| A | B |
+---+---+
| C | D |
| | |
+---+---+
| E | F |
+---+---+
В родительской таблице попробуйте установить
border-collapse:separate;
border-spacing:5em;
плюс объявление границы и посмотрите, достигнет ли это желаемого эффекта. Однако имейте в виду, что IE не поддерживает модель "разделенных границ".
У вас есть таблица с идентификационными альбомами с любыми данными... Я пропустил trs и tds
<table id="albums" cellspacing="0">
</table>
В CSS:
table#albums
{
border-collapse:separate;
border-spacing:0 5px;
}
так как у меня есть фоновое изображение за столом, подделка его белой прокладкой не сработает. Я решил поместить пустую строку между каждой строкой контента:
<tr class="spacer"><td></td></tr>
затем используйте css, чтобы придать рядам распорки определенную высоту и прозрачный фон.
Из сети разработчиков Mozilla:
Свойство CSS, разделяющее границы, определяет расстояние между границами соседних ячеек (только для модели разделенных границ). Это эквивалентно атрибуту cellspacing в презентационном HTML, но необязательное второе значение может использоваться для установки различного горизонтального и вертикального интервала.
Эта последняя часть часто контролируется. Пример:
.your-table {
border-collapse: separate; /* allow spacing between cell borders */
border-spacing: 0 5px; /* NOTE: syntax is <horizontal value> <vertical value> */
ОБНОВЛЕНИЕ
Теперь я понимаю, что ОП хочет, чтобы определенные отдельные строки имели увеличенный интервал. Я добавил настройку с элементами tbody
, которая выполняет это, не разрушая семантику. Однако я не уверен, поддерживается ли он во всех браузерах. Я сделал это в Chrome.
Приведенный ниже пример показывает, как вы можете сделать так, чтобы таблица выглядела так, как будто таблица существует из отдельных рядов, полномасштабной сладости. Также дал первому ряду больше интервалов с настройкой tbody
. Не стесняйтесь использовать!
& Лт;!- начать фрагмент: js hide: ложная консоль: ложная павиана: ложная - >
.spacing-table {
font-family: 'Helvetica', 'Arial', sans-serif;
font-size: 15px;
border-collapse: separate;
table-layout: fixed;
width: 80%;
border-spacing: 0 5px; /* this is the ultimate fix */
}
.spacing-table th {
text-align: left;
padding: 5px 15px;
}
.spacing-table td {
border-width: 3px 0;
width: 50%;
border-color: darkred;
border-style: solid;
background-color: red;
color: white;
padding: 5px 15px;
}
.spacing-table td:first-child {
border-left-width: 3px;
border-radius: 5px 0 0 5px;
}
.spacing-table td:last-child {
border-right-width: 3px;
border-radius: 0 5px 5px 0;
}
.spacing-table thead {
display: table;
table-layout: fixed;
width: 100%;
}
.spacing-table tbody {
display: table;
table-layout: fixed;
width: 100%;
border-spacing: 0 10px;
}
<table class="spacing-table">
<thead>
<tr>
<th>Lead singer</th>
<th>Band</th>
</tr>
</thead>
<tbody>
<tr>
<td>Bono</td>
<td>U2</td>
</tr>
</tbody>
<tbody>
<tr>
<td>Chris Martin</td>
<td>Coldplay</td>
</tr>
<tr>
<td>Mick Jagger</td>
<td>Rolling Stones</td>
</tr>
<tr>
<td>John Lennon</td>
<td>The Beatles</td>
</tr>
</tbody>
</table>
& Лт;!- конец фрагмента - >
Вы не можете изменить поле ячейки таблицы. Но вы можете изменить отступ. Измените отступ TD, что сделает ячейку больше и отодвинет текст от стороны с увеличенным отступом. Однако если у вас есть пограничные линии, это все равно будет не совсем то, что вы хотите.
Вам нужно установить border-collapse: отдельно;
на таблице; большинство таблиц стилей по умолчанию для браузера начинаются с border-collapse: clapse;
, который сбрасывает границы между границами.
Кроме того, пограничное пространство: идет на TD
, а не TR
.
Попробуй:
<html><head><style type="text/css">
#ex { border-collapse: separate; }
#ex td { border-spacing: 1em; }
</style></head><body>
<table id="ex"><tr><td>A</td><td>B</td></tr><tr><td>C</td><td>D</td></tr></table>
</body>
Хорошо, вы можете сделать
tr.classname td {background-color:red; border-bottom: 5em solid white}
Убедитесь, что цвет фона установлен на td, а не на строке. Это должно работать в большинстве браузеров... (Хром, т.е. и т. Д. Испытан)
Взгляните на атрибут [border-collapse: separt][1] (по умолчанию) и свойство [border-spacing][2].
Сначала вы должны отделить их с помощью пограничного коллапса , затем вы можете определить пространство между столбцами и строками с интервалом границы .
Оба эти свойства CSS на самом деле хорошо поддерживаются в каждом браузере, см. Здесь.
& Лт;!- начать фрагмент: js hide: ложная консоль: истинная павиана: false - >
table {border-collapse: separate; border-spacing: 10px 20px;}
table,
table td,
table th {border: 1px solid black;}
<table>
<tr>
<td>Some text - 1</td>
<td>Some text - 1</td>
</tr>
<tr>
<td>Some text - 2</td>
<td>Some text - 2</td>
</tr>
<tr>
<td>Some text - 3</td>
<td>Some text - 3</td>
</tr>
</table>
& Лт;!- конец фрагмента - >
[1]: https://www.w3schools.com/cssref/tryit.asp?filename = trycss_border-collapse [2]: https://www.w3schools.com/cssref/tryit.asp?filename = trycss_border-spacing
Вы можете использовать line-height в таблице:
<table style="width: 400px; line-height:50px;">
Для создания иллюзии расстояния между строками примените цвет фона к ряду, а затем создайте толстую рамку белого цвета, чтобы было создано «пространство» :)
tr
{
background-color: #FFD700;
border: 10px solid white;
}
Слишком поздний ответ :)
Если вы примените float к элементам tr
, вы можете перемещаться между двумя строками с атрибутом margin
.
table tr{
float: left
width: 100%;
}
tr.classname {
margin-bottom:5px;
}
Правильный способ сделать интервал для таблиц - использовать прокладку ячеек и прохождение ячеек, например,.
<table cellpadding="4">
Я наткнулся на это, борясь с подобной проблемой. Я нашел ответ Варуна Натрааджа весьма полезным, но вместо этого я бы использовал прозрачную границу.
td { border: 1em solid transparent; }
Прозрачные границы все еще имеют ширину.
Работает для большинства последних браузеров в 2015 году. Простое решение. Это не работает для прозрачности, но в отличие от ответа Торонвена, я не могу стать прозрачным для рендеринга любого размера.
tr {
border-bottom:5em solid white;
}
Просто поместите div в td и установите следующие стили div:
margin-bottom: 20px;
height: 40px;
float: left;
width: 100%;
Я понимаю, что это ответ на старую ветку, и, возможно, это не запрашиваемое решение, но хотя все предложенные решения не сделали то, что мне было нужно, это решение сработало для меня.
У меня было 2 ячейки стола, одна с цветом фона, другая с цветом рамки. Вышеуказанные решения удаляют границу, поэтому ячейка справа, по-видимому, плавает в воздухе.
Решение, которое помогло, состояло в том, чтобы заменить table
, tr
и td
на div и соответствующие классы: таблица будет div id = "table_replacer"
, tr будет div class = "tr_replacer"
и td будетdiv class = "td_replacer"
(очевидно, также изменить закрывающие теги на div)
Чтобы найти решение моей проблемы, css:
#table_replacer{display:table;}
.tr_replacer {border: 1px solid #123456;margin-bottom: 5px;}/*DO NOT USE display:table-row! It will destroy the border and the margin*/
.td_replacer{display:table-cell;}
Надеюсь, это кому-то поможет.
Или просто добавьте пробел < tr > < / tr > с высотой поля между строками вы хотели бы добавить интервал