Разстояние в html таблица между редовете

Опитвам се да създам таблица с атрибута display: table.

Проблемът, който имам, е, че имам структура, в която моята таблица съдържа различни редове, където всеки два реда трябва да съставят група от редове. Затова използвах table-row-group

<div class="table">
<div style="display: table-row-group;">
<div class="display: table-row;">
    <div class="cell">
        <p>18:00:00</p>
    </div>
    <div class="cell"></div>
    <div class="cell right">
        <p>A</p>
    </div>
</div>
<div class="display: table-row;">
    <div class="cell team">
        <p>Team 1</p>
    </div>
    <div class="cell center">
        <p>:</p>
    </div>
    <div class="cell right team">
        <p>Team 2</p>
    </div>
</div>
</div>
</div>

Ето цигулката: http://jsfiddle.net/2xqfdn38/

Това, което искам да направя сега, между всяка група-ред-таблица трябва да има интервал, но не и между редовете-таблица. Опитах се да добавя разстояние между границите към таблицата с класове, но това ще доведе до разстояние между всички редове, а не само между групите редове на таблицата.

Някой знае ли решение?


html css css-tables tablerow
person fsulser    schedule 11.09.2014    source източник
comment
Защо не използвате истинска маса?   -  person davidcondrey    schedule 11.09.2014
comment
Моля, вижте моя отговор с работеща демонстрация :)   -  person Jay    schedule 11.09.2014

Отговори (4)


arrow_upward
3
arrow_downward

Друго решение е:

.table {
    font-size: 18px;
    border-spacing: 0 10px;
    display: table;
    width: 100%;
    border-collapse: collapse;/*Set border-collapse: collapse*/
}

.row-group {
    display: table-row-group;
    width: 100%;
    border-bottom: 10px solid #ffffff;/*Change border color to white and apply only to bottom*/
}

цигулка

И един по-добър е да използвате псевдо-елемент after:

.row-group:after{
    content: "";
    height:20px;
    display: block;
}

пример за използване на цигулка след

Можете да регулирате височината според вашите нужди.

person Alex Char    schedule 11.09.2014

arrow_upward
2
arrow_downward

Мисля, че трябва да използвате border-collapse в таблицата.

надявам се, че ще ви помогне.

border-collapse:collapse;

ДЕМО

person Mukul Kant    schedule 11.09.2014
comment
Кодът в DEMO също задава .row-group { display: table}, което е от решаващо значение за ефекта. Трябва да кажете това в отговора. Създаването на таблици с групи редове може да има сериозен ефект върху други неща: вече нямате нито една таблица, така че не можете напр. оставете браузърите да разпределят ширини на колони според изискванията за съдържание (или може да нарушат табличното оформление). - person Jukka K. Korpela; 11.09.2014

arrow_upward
2
arrow_downward

Следните промени във вашия css ще добавят разстояние между групите редове.

.row-group::after
{
    content: "\00a0";
}

Актуализирах и вашия цигулка

person Thangadurai    schedule 11.09.2014

arrow_upward
0
arrow_downward

Премахнете разстоянието между границите от класа на таблицата, след това използвайте рамка със същия цвят като фона на вашата страница, за да създадете разстояние между групите, този css трябва да работи добре;

.row .cell {
border-bottom: 10px solid #fff; /* FOR A WHITE BACKGROUND */
}
.row.header .cell {
border: none !Important;
}

Демо тук > http://jsfiddle.net/23of5xv8/

person Jay    schedule 11.09.2014