如何在响应表中将行划分为 <td>

Question

我有一个这样的表：

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

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

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

是否可以？

我只想使用 css，不使用 jquery。使用 display: property, td::after 我该怎么办？我该如何解决这个问题？

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

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

Answer 1

<table>并且@media不是最好的朋友。相反，如果我们愿意的话，我们
<div>可以两者兼而有之display: block;，所以让我们一起摇滚吧display: table;

jsBin 演示

*{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>