我有一张css表,我试图在每一行之间留一个空格,这个间隙应该没有颜色。我尝试过一些没有用过的东西,如:
border-bottom:5px实心透明; border-top:5px solid transparent;
和
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;
}
答案 0 :(得分:3)
使用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;
}
&#13;
<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>
&#13;