Html 响应表，正在尝试获取列*上方的标题*

我们有一张像下面这样的桌子。我正在尝试使用一些技巧使其响应

现在的结果是，我在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>

---

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

div.ox\u表{
显示：无；
}
@仅介质屏幕和（最大宽度：767px）{
table.ox_table{
显示：无；
}
div.ox_表{
显示：块；
}
}

表格
校长1
校长2
校长3
校长4
可乐
可乐
可乐
可乐
校长1
可乐

校长2
可乐

校长3
可乐

校长4
可乐

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

@仅媒体屏幕和（最大宽度：767px）{
table.ox_table，
table.ox_table thead，
table.ox_table t车身，
table.ox_table tr，
table.ox_table td，
table.ox_table th{
显示：块；
}
table.ox_table{
位置：相对位置；
}
table.ox_table thead，
table.ox_table t车身{
线高：250%；
位置：绝对位置；
左：0；
}
table.ox_table t车身{
顶部：1米；
}
}

表格
校长1
校长2
校长3
校长4
可乐
可乐
可乐
可乐

谢谢，但我们想显示表格。问题是我们如何保存标题（列下方）

/* 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;}
}