表行（tr）分隔和边框

Question

我对表有一个样式问题。

我需要以下内容：

• 响应表（在移动设备上有些单元格崩溃）
• 表格行之间的分离
• 表格行之间的边界
• 不能假设有关表格行高的任何内容

这样的事情：

图像：

供参考检查这个小提琴：http://jsfiddle.net/m15rccmr/

＆＃13;

＆＃13;

table{
    width: 100%;
    border-collapse: separate;
    border-spacing: 0 30px;
}
tr{
    border-bottom: 1px solid red;
}

.mobile-fold{
    display:block;
}
@media (min-width: 800px){
    .mobile-fold{
        display:table-cell;
    }
}

＆＃13;

<table>
    <tbody>
           <tr>
            <td>first</td>
            <td class="mobile-fold">second</td>
            <td class="mobile-fold">third</td>
       </tr>
        
        <tr>
            <td>first</td>
            <td class="mobile-fold">second</td>
            <td class="mobile-fold">third</td>
       </tr>
        
        <tr>
            <td>first</td>
            <td class="mobile-fold">second</td>
            <td class="mobile-fold">third</td>
       </tr>
    </tbody>
</table>

＆＃13;

＆＃13;

＆＃13;

我需要在表行之间添加一个边框，它应该在移动设备和桌面上显示正常。

有什么想法吗？

Answer 1

我认为这就是你的目标

JSfiddle Demo

＆＃13;

＆＃13;

table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0 30px;
}
td {
  border-bottom: 1px solid red;
}
td:nth-of-type(2) {
  border: none;
}
.mobile-fold {
  display: block;
}
@media (min-width: 800px) {
  .mobile-fold {
    display: table-cell;
  }
  td:nth-of-type(2) {
    border-bottom: 1px solid red;
  }
}

＆＃13;

<table>
  <tbody>
    <tr>
      <td>first</td>
      <td class="mobile-fold">second</td>
      <td class="mobile-fold">third</td>
    </tr>
    <tr>
      <td>first</td>
      <td class="mobile-fold">second</td>
      <td class="mobile-fold">third</td>
    </tr>
    <tr>
      <td>first</td>
      <td class="mobile-fold">second</td>
      <td class="mobile-fold">third</td>
    </tr>
  </tbody>
</table>

＆＃13;

＆＃13;

＆＃13;