CSS 表格行之间的空间答案

【问题标题】：Space between CSS Table RowsCSS 表格行之间的空间
【发布时间】：2016-05-05 18:44:51
【问题描述】：

我有一个 css 表，并试图在每一行之间留出一个空格，间隙应该没有颜色。我尝试了一些没有用的方法，例如：

border-bottom: 5px 实心透明； border-top: 5px 实心透明；

和

border-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;   
}

【问题讨论】：

为什么要先用div再用css建表？无论如何，有一个名为border-spacing 的属性可能就是你想要的。 developer.mozilla.org/en-US/docs/Web/CSS/border-spacing
您想保留每个边框吗？例如，您希望每个单元格都有边框，但在每行之间添加一个没有颜色的空格？
CSS: how do I create a gap between rows in a table?的可能重复
您正在使用display:table; 使行之间的间距将border-spacing : 0 5px; 添加到.live-mu-table Class
@user1763812 好的。我曾经写过an answer，详细说明了 HTML 表格和 CSS 表格之间的所有区别。希望这会有所帮助。

标签： html css

【解决方案1】：

使用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>

【讨论】：