html - 响应表，试图让标题*高于*列

Question

我们有如下表格。我正在尝试使用发现的一些技巧使其响应 here .

现在的结果是我在 iPhone 上看到了以下内容:

header1
header2
etc
col1
col2
etc

当我希望

header1
col1
header2
col2
etc

我的问题:如何首先显示我的标题，然后显示所有行(来自列，然后是标题 + 第 2 列的数据，然后是标题 + 来自第 3 列的数据，等等

感谢帮助

---

示例 HTML

<h2>table</h2>
<table class="ox_table">
<thead>
<tr><th>header1</th><th>header2</th><th>header3</th><th>header4</th></tr>
</thead>
<tbody>
<tr>
<td>col1</td>
<td>col2</td>
<td>col3</td>
<td>col4</td>
</tr>
</tbody>
</table>

示例 CSS

/* Make responsive */
@media only screen and (max-width: 767px) {
 table.ox_table, table.ox_table thead, table.ox_table td, table.ox_table tr, table.ox_table tbody, table.ox_table th { display: block;}
}

Answer 1

如果您能够编辑您的 HTML，只需将您的数据添加到非表结构并隐藏它，如下所示:

http://jsfiddle.net/r44mof0t/

div.ox_table {
  display: none;
}
@media only screen and (max-width: 767px) {
  table.ox_table {
    display: none;
  }
  div.ox_table {
    display: block;
  }
}

<h2>table</h2>

<table class="ox_table">
  <thead>
    <tr>
      <th>header1</th>
      <th>header2</th>
      <th>header3</th>
      <th>header4</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>col1</td>
      <td>col2</td>
      <td>col3</td>
      <td>col4</td>
    </tr>
  </tbody>
</table>
<div class="ox_table">
  <h4>header1</h4>
  <p>col1</p>
  <h4>header2</h4>
  <p>col2</p>
  <h4>header3</h4>
  <p>col3</p>
  <h4>header4</h4>
  <p>col4</p>
</div>