css – 如何在响应表中划分行

我有这样一张桌子：

+----+----+----+----+----+----+
| A  | A  | B  | B  | C  | C  |
+----+----+----+----+----+----+

我需要在小屏幕上得到这个结果

+----+----+
| A  | A  |
+----+----+
| B  | B  |
+----+----+
| C  | C  |
+----+----+

可能吗？

我想只使用css,没有jquery.
使用display：property,td :: after
我应该怎么做 ？
我怎么解决这个问题？

@media( max-width:640px) {
   #test,#test thead,#test tbody {} #test tr {
     /* ? */
   }
   #test th {
     /* ? */
   }
   #test td {
     /* ? */
   }
   #test td::after {
     /* ? */
   }
   #test tr {
     border-bottom: 1px solid #ddd;
   }
   #test th,#test td {
     border-top: none;
     border-bottom: none;
   }
 }

<table id="test" class="table">
  <tr>
    <th>A</th>
    <td>A</td>
    <th>B</th>
    <td>B</td>
    <th>C</th>
    <td>C</td>
  </tr>
  <tr>
    <th>D</th>
    <td>D</td>
    <th>E</th>
    <td>E</td>
    <th>F</th>
    <td>F</td>
  </tr>
</table>

解决方法

<表>和@media不是最好的朋友.
< DIV>相反可以显示：块;并显示：table;如果我们愿意,那就让我们摇滚吧

jsBin demo

*{Box-sizing:border-Box;-webkit-Box-sizing:border-Box;}html,body{height:100%;margin:0;}

.table{
  display: table;
  width: 100%;
  table-layout: fixed;
  border-left: 1px solid #444;
  border-top:  1px solid #444;
}
.tr{
  display: table-row;
}
.td,.th{
  display: table-cell;  
  background: #eee;
  border-bottom: 1px solid #444;
  border-right: 1px solid #444;
}
.th{
  font-weight: bold;
}

@media(max-width:640px) {
  .table,.tr{
    display: block;
  }
  .th,.td{
    width: 50%;
    float: left;
  }
}

<div class="table">
  <div class="tr">
    <div class="th">A</div>
    <div class="td">A</div>
    <div class="th">B</div>
    <div class="td">B</div>
    <div class="th">C</div>
    <div class="td">C</div>
  </div>
  <div class="tr">
    <div class="th">D</div>
    <div class="td">D</div>
    <div class="th">E</div>
    <div class="td">E</div>
    <div class="th">F</div>
    <div class="td">F</div>
  </div>
</div>