我们有如下表格。我正在尝试使用发现的一些技巧使其响应 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;}
}
最佳答案
如果您能够编辑您的 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>
关于html - 响应表,试图让标题*高于*列,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/31112730/