Пробел между CSS Таблицы строк

У меня есть таблица css и я пытаюсь сделать промежуток между каждой строкой, пробел не должен иметь цвета. Я пробовал несколько вещей, которые не сработали, например:Пробел между CSS Таблицы строк

border-bottom: 5px solid transparent; border-top: 5px сплошная прозрачная;

border-collapse: collapse;

Код ниже вместе с jsfiddle.

Спасибо.

HTML

<div class="live-mu-table" > 
    <div class="live-mu-table-tr"> 
     <div class="live-mu-table-tdq" id="a-1">q1</div> 
     <div class="live-mu-table-tdspacer1"></div> 
     <div class="live-mu-table-tda" id="a-3">A3</div> 
    </div> 

    <div class="live-mu-table-tr"> 
     <div class="live-mu-table-tdq" id="q-2">q2</div> 
     <div class="live-mu-table-tdspacer1"></div> 
     <div class="live-mu-table-tda" id="a-1">A1</div> 
    </div> 

    <div class="live-mu-table-tr"> 
     <div class="live-mu-table-tdq" id="q-3">q3</div> 
     <div class="live-mu-table-tdspacer1"></div> 
     <div class="live-mu-table-tda" id="a-2">A2</div> 
    </div> 
</div>

CSS

.live-mu-table{ 
display: table; 
background-color:Azure; 
margin-bottom: 5px; 
padding-bottom: 5px; 
position:relative; 
margin-left: auto; 
margin-right: auto;  
width:75%; 
// border-collapse: collapse; 
} 
.live-mu-table-tr{ 
    display: table-row; 
    height:30px; 
} 
.live-mu-table-tdq{ 
    display: table-cell; 
    border:1px solid #000; 
    width:60%; 
    text-align:center; 
    vertical-align:middle; 
    cursor: pointer; 
} 

.live-mu-table-tda{ 
    display: table-cell; 
    border:1px solid #000; 
    width:30%; 
    text-align:center; 
    vertical-align:middle; 
cursor: pointer; 
} 

.live-mu-table-tdspacer1{ 
    display: table-cell; 
    border:1px solid #000; 
    width:10%; 
    text-align:center; 
    vertical-align:middle; 
}

источник

2016-01-28 user1763812

Почему вы используете дивы, а затем CSS для создания таблиц? Во всяком случае, есть атрибут, называемый border-spacing, который, возможно, вы хотите. https://developer.mozilla.org/en-US/docs/Web/CSS/border-spacing – Paran0a

Вы хотите сохранить каждую границу? для istance вы хотите, чтобы каждая ячейка имела границы, но добавляла пробел между каждой строкой без цвета? – Lorenzo

Возможный дубликат [CSS: как создать промежуток между строками в таблице?] (Http://stackoverflow.com/questions/1264187/css-how-do-i-create-a-gap-between-rows -in-a-table) – Venugopal

Использование border-spacing для создания интервала.

И если вы хотите, чтобы промежутки не имели цвета фона, переместите background-color из таблицы в строки таблицы.

.live-mu-table { 
 
    display: table; 
 
    margin-bottom: 5px; 
 
    padding-bottom: 5px; 
 
    position: relative; 
 
    margin-left: auto; 
 
    margin-right: auto; 
 
    width: 75%; 
 
    border-spacing: 0 3px;  /* new */ 
 
} 
 
.live-mu-table-tr { 
 
    display: table-row; 
 
    height: 30px; 
 
    background-color: Azure; /* moved */ 
 
} 
 
.live-mu-table-tdq { 
 
    display: table-cell; 
 
    border: 1px solid #000; 
 
    width: 60%; 
 
    text-align: center; 
 
    vertical-align: middle; 
 
    cursor: pointer; 
 
} 
 
.live-mu-table-tda { 
 
    display: table-cell; 
 
    border: 1px solid #000; 
 
    width: 30%; 
 
    text-align: center; 
 
    vertical-align: middle; 
 
    cursor: pointer; 
 
} 
 
.live-mu-table-tdspacer1 { 
 
    display: table-cell; 
 
    border: 1px solid #000; 
 
    width: 10%; 
 
    text-align: center; 
 
    vertical-align: middle; 
 
}

<div class="live-mu-table"> 
 
    <div class="live-mu-table-tr"> 
 
    <div class="live-mu-table-tdq" id="a-1">q1</div> 
 
    <div class="live-mu-table-tdspacer1"></div> 
 
    <div class="live-mu-table-tda" id="a-3">A3</div> 
 
    </div> 
 

 
    <div class="live-mu-table-tr"> 
 
    <div class="live-mu-table-tdq" id="q-2">q2</div> 
 
    <div class="live-mu-table-tdspacer1"></div> 
 
    <div class="live-mu-table-tda" id="a-1-2">A1</div> 
 
    </div> 
 

 
    <div class="live-mu-table-tr"> 
 
    <div class="live-mu-table-tdq" id="q-3">q3</div> 
 
    <div class="live-mu-table-tdspacer1"></div> 
 
    <div class="live-mu-table-tda" id="a-2">A2</div> 
 
    </div> 
 
</div>

источник

2016-01-28 11:56:44

Удивительный! Спасибо. – user1763812

Пробел между CSS Таблицы строк

ответ

Смежные вопросы