将水平表格转换为垂直表格
将水平表格转换为垂直表格
提问于 2019-07-29 18:26:13
我使用bootstrap来显示响应表。
该表是水平的，包含2行-标题和数据。
当用户使用移动设备时，有没有翻转表格并垂直显示的脚本？
<div class="table-responsive">
<table class="table">
<thead>
<tr>
<th><?PHP echo $langDir['general']['date'] ?></th>
<th><?PHP echo $langDir['general']['time'] ?></th>
<th><?PHP echo $langDir['general']['location'] ?></th>
<th><?PHP echo $langDir['car']['pickup'] ?></th>
</tr>
</thead>
<tbody>
<tr>
<td><?PHP echo $pnrProduct['Date'] ?></td>
<td><?PHP echo $pnrProduct['DepArr'] ?></td>
<td><?PHP echo $pnrProduct['City'] ?></td>
<td><?PHP echo $pnrProduct['RoomClass'] ?></td>
</tr>
</tbody>
</table>
</div>Stack Overflow用户
发布于 2019-07-30 17:10:11
我不知道PHP代码，但我提供您的HTML代码，将帮助您。或者你可以在你的代码中使用这个css，并在表标签中添加类'.table_card_view‘。
<style>
.table_card_view { border-collapse: collapse; }
@media only screen and (max-width:768px) and (min-width:200px) {
.table_card_view, .table_card_view thead, .table_card_view tbody,
.table_card_view th, .table_card_view td, .table_card_view tr
{ display: block; }
.table_card_view thead tr { position: absolute; top: -9999px; left: -9999px; }
.table_card_view tr
{ border: 1px solid #ccc; margin-top: 4%; border-radius:7px; }
.table_card_view td {
border: none; border-bottom: 0px solid #eee;position: relative; padding-left: 50%;
}
.table_card_view td:before {
top: 6px; left: 6px; width: 45%;padding-right: 10px; white-space: nowrap;
content: attr(data-column); color: #000; font-weight: bold;
}
}
</style>
<body>
<table class="table table-striped table_card_view">
<thead>
<tr>
<th> Date </th>
<th> Time </th>
<th> Location </th>
<th> Pickup </th>
</tr>
</thead>
<tbody>
<tr>
<td data-column="Date"> 23 July 2019 </td>
<td data-column="Time"> 10:20 PM </td>
<td data-column="Location"> XYZ </td>
<td data-column="Pickup"> XYZ </td>
</tr></tbody>
</table>
</body>页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/57251858
复制相关文章
相似问题
腾讯云开发者
