我们有一个如下表格。我正在尝试使用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;}
}
答案 0 :(得分:0)
如果您能够编辑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>
答案 1 :(得分:0)
您可以使用绝对定位,如下所示:
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>