响应表，试图获得列*上方的标题*

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，只需将数据添加到非表结构并隐藏它，如下所示：

https://www.dartlang.org/tools/pub/cmd/pub-global.html

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>

Answer 2

您可以使用绝对定位，如下所示：

http://jsfiddle.net/r44mof0t/1/

@media only screen and (max-width: 767px) {
  table.ox_table,
  table.ox_table thead,
  table.ox_table tbody,
  table.ox_table tr,
  table.ox_table td,
  table.ox_table th {
    display: block;
  }
  table.ox_table {
    position: relative;
  }
  table.ox_table thead,
  table.ox_table tbody {
    line-height: 250%;
    position: absolute;
    left: 0;
  }
  table.ox_table tbody {
    top: 1em;
  }
}

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