Пространство между tr, с tr в качестве смежных блоков - PullRequest
Новая
       25

Пространство между tr, с tr в качестве смежных блоков

0 голосов
/ 28 июля 2011

Я хочу отформатировать таблицу так, чтобы она отображалась в виде строк, где каждая строка представляла собой непрерывный блок и чтобы между строками было пространство. Пример: 

<table>
<tr><td>John</td><td>Doe</td><td>24</td></tr>
<tr><td>Jack</td><td>Foo</td><td>34</td></tr>
<tr><td>Jim</td><td>Beam</td><td>102</td></tr>
</table>

То, что я хочу, должно выглядеть примерно так:

enter image description here

Я достиг вышеуказанного, создав дополнительные строки tr между данными: 

<style>
body { background-color: #aaaaff; } 
table { border-collapse: collapse; }
.space_tr { height: 1px; }
.info_tr { background-color: grey; }
.info_tr td { padding: 5 20 5 20px; }
</style>
<table>
<tr class='info_tr'><td>John</td><td>Doe</td><td>24</td></tr>
<tr class='space_tr'><td colspan='3'></td></tr>
<tr class='info_tr'><td>Jack</td><td>Foo</td><td>34</td></tr>
<tr class='space_tr'><td colspan='3'></td></tr>
<tr class='info_tr'><td>Jim</td><td>Beam</td><td>216</td></tr>
</table>

Но я хочу знать, смогу ли я добиться этого форматирования только с помощью CSS, то есть, не меняя ничего в html, который я написал вверху.

EDIT:

Адам Кисс предложил использовать нижнюю границу того же цвета, что и фон. Это работает в моем текущем случае, но, как он указывает, это не сработает, если фон имеет не просто одноцветную поверхность.

Для полноты: можно ли достичь вышеуказанного при сохранении прозрачности промежутков?

Ответы [ 3 ]

2 голосов
/ 28 июля 2011

, если ваша ситуация соответствует вашей картине, то есть у вас полноцветный фон, должно быть абсолютно достаточно следующего: 

td { padding: 5px 20px; background: #666; border-bottom: 3px solid #backgroundColor; }

:)

Только что заметил ваше обновление: я бы либо использовал (или другой тег) внутри , либо играл с полями на с, хотя я не думаю, что это сработает:)

1 голос
/ 28 июля 2011

Вы можете добавить border-bottom: 2px solid #aaaaff; к вашим tr с, где #aaaaff - это цвет фона вашего тела, а 2px - это расстояние между строками.

Пример: http://jsfiddle.net/ZHdgz/

0 голосов
/ 28 июля 2011 
    <style>
    table { border-collapse: collapse; border:solid 10px #aaaaff; background-color:#aaaaff;}
    .space_tr { height: 1px; }
    .info_tr { background-color: grey; }
    .info_tr td { padding: 5 20 5 20px; }
    </style>
    <table>
    <tr class='info_tr'><td>John</td><td>Doe</td><td>24</td></tr>
    <tr class='space_tr'><td colspan='3'></td></tr>
    <tr class='info_tr'><td>Jack</td><td>Foo</td><td>34</td></tr>
    <tr class='space_tr'><td colspan='3'></td></tr>
    <tr class='info_tr'><td>Jim</td><td>Beam</td><td>216</td></tr>
    </table>

попробуйте это ..... это может работать

...