Це означає, що результуюча таблиця буде виглядати менш так:
[=== РЯДОК ===] [=== РЯДОК ===] [=== РЯДОК ===] [=== РЯДОК ===]
... і більше подібного:
[=== РЯДОК ===] [=== РЯДОК ===] [=== РЯДОК ===] [=== РЯДОК ===]
Я спробував додати
margin-bottom:1em;як td, так і tr, але нічого не отримав. Будь-які ідеї?
Відповіді:
Все, що вам потрібно:
table {
border-collapse: separate;
border-spacing: 0 1em;
}
Це передбачає, що ви хочете вертикальний зазор 1em, а не горизонтальний зазор. Якщо ви робите це, вам, мабуть, слід також поглянути на контроль висоти рядка.
Щось дивно, але деякі відповіді, які люди давали, стосуються колапсу кордону: колапсу, ефект якого є прямо протилежним до запитаного.
thead, tbody {position: relative; top: -{border-spacing-value} }.
table {
border-collapse: collapse;
}
td {
padding-top: .5em;
padding-bottom: .5em;
}
Клітинки ні на що не реагуватимуть, якщо спочатку ви не встановите обмеження кордону. Ви також можете додати межі до елементів TR після встановлення (крім іншого).
Якщо це стосується верстки, я б перейшов до використання DIV та більш сучасних методів компонування, але якщо це табличні дані, вибивайте себе з ладу. Я все ще активно використовую таблиці у своїх веб-додатках для даних.
Якщо жодна з інших відповідей не задовільна, ви завжди можете просто створити порожній рядок і стильно надати його CSS, щоб бути прозорим.
Якщо у вас немає меж, або у вас є межі, і ви хочете інтервал всередині комірок, ви можете використовувати padding, або line-height. Наскільки мені відомо, поле не впливає на клітинки та рядки.
Властивість CSS для інтервалу між клітинками є border-spacing, але вона не працює на IE6 / 7 (тому ви можете використовувати її залежно від вашої натовпу).
Якщо все інше не вдається, ви можете використовувати старий cellspacingатрибут у своїй розмітці, але це також дасть вам інтервал між стовпцями. Деякі скидання CSS пропонують вам все-таки встановити його, щоб отримати підтримку між браузерами:
/ * таблиці все ще потрібні
cellspacing="0"в розмітці * /
Це спосіб (я думав, що це неможливо):
Спочатку надайте таблиці лише вертикальний інтервал меж (наприклад, 5 пікселів) і встановіть для горизонтального інтервалу межі значення 0. Потім ви повинні дати належні межі кожній комірці рядка. Наприклад, сама права клітинка в кожному рядку повинна мати межу зверху, знизу та праворуч. Крайні ліві комірки повинні мати межу зверху, знизу та ліворуч. А інші комірки між цими двома мають мати лише межу зверху та знизу. Ось такий приклад:
<table style="border-spacing:0 5px; color:black">
<tr>
<td style="border-bottom:thin black solid; border-top:thin black solid; border-left:thin black solid;">left-most cell</td>
<td style="border-bottom:thin black solid; border-top:thin black solid;">other cell</td>
<td style="border-bottom:thin black solid; border-top:thin black solid;">other cell</td>
<td style="border-bottom:thin black solid; border-top:thin black solid;">other cell</td>
<td style="border-bottom:thin black solid; border-top:thin black solid; border-right:thin black solid;">right-most cell</td>
</tr>
<tr>
<td style="border-bottom:thin black solid; border-top:thin black solid; border-left:thin black solid;">left-most cell</td>
<td style="border-bottom:thin black solid; border-top:thin black solid;">other cell</td>
<td style="border-bottom:thin black solid; border-top:thin black solid;">other cell</td>
<td style="border-bottom:thin black solid; border-top:thin black solid;">other cell</td>
<td style="border-bottom:thin black solid; border-top:thin black solid; border-right:thin black solid;">right-most cell</td>
</tr>
<tr>
<td style="border-bottom:thin black solid; border-top:thin black solid; border-left:thin black solid;">left-most cell</td>
<td style="border-bottom:thin black solid; border-top:thin black solid;">other cell</td>
<td style="border-bottom:thin black solid; border-top:thin black solid;">other cell</td>
<td style="border-bottom:thin black solid; border-top:thin black solid;">other cell</td>
<td style="border-bottom:thin black solid; border-top:thin black solid; border-right:thin black solid;">right-most cell</td>
</tr>
</table>
Просто ви можете використовувати padding-topі padding-bottomна tdелементі.
Одиниця може що-небудь із цього списку:
td
{
padding-top: 10px;
padding-bottom: 10px;
}<table>
<tr>
<th>Firstname</th>
<th>Lastname</th>
</tr>
<tr>
<td>Peter</td>
<td>Griffin</td>
</tr>
<tr>
<td>Lois</td>
<td>Griffin</td>
</tr>
</table>відступ в TD працює, якщо ви хочете, щоб простір мав такий же колір фону, як і td
у моєму випадку вимога полягала в пробілі між рядком заголовка та тим, що було над ним
застосувавши цей стиль до однієї комірки, я зміг отримати бажане розділення. Не потрібно було додавати його до всіх комірок ... Можливо, не НАЙЕФАНТНІШИЙ, але, можливо, більш елегантний, ніж розділові рядки.
<td colspan="10">
<div class="HeaderRow"
style="margin-top:10px;">
<%# Eval("VendorName")%>
</div>
</td> Якщо ви дотримуєтесь дизайну, використовуючи таблиці, найкращою ідеєю буде дати порожній рядок без вмісту та вказаної висоти між кожними рядками таблиці.
Ви можете використовувати div, щоб уникнути цієї складності. Просто дайте запас для кожного div.
Ви також можете просто змінити висоту для кожного рядка за допомогою CSS.
<head>
<style>
tr {
height:40px;
}
</style>
</head>
<body>
<table>
<tr> <td>One</td> <td>Two</td> </tr>
<tr> <td>Three</td> <td>Four</td> </tr>
<tr> <td>Five</td> <td>Six</td> </tr>
</table>
</body>Ви також можете змінити висоту <td>елемента, це має дати той самий результат.
Створіть інший <tr>трохи нижче і додайте пробіл або висоту до вмісту<td>
Отримайте, наприклад, скрипку
Додайте наступне правило до tr, і воно повинно працювати
float: leftЗразок (відкрийте його в позакласному курсі IE9 :)): http://jsfiddle.net/zshmN/
РЕДАГУВАТИ: Це не є законним або правильним рішенням, на що вказують багато людей, але якщо у вас немає можливості і вам щось потрібно, це спрацює в IE9.
Тож усі ті, хто віддає голоси, також повідомте нам правильне рішення