Question

我正在使用引导程序来显示响应表。

表是水平的，包含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>

Answer 1

我不了解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>

Answer 2

您正在使用Bootstrap，太好了。也许，编写自己的自定义脚本会很耗时。但是，您可以使用几个插件来实现所需的功能。其中之一是DataTable.js - Responsive插件。您所要做的就是在您的项目中添加此插件，然后只需添加以下脚本：

$('.table').DataTable({
    responsive: true
});

上面的插件将根据窗口大小将水平列转换为垂直结构：

看看这个example。希望这个例子符合您的要求。尝试调整浏览器窗口的大小，以了解水平/垂直性质。

希望这会有所帮助：）

将水平表转换为垂直表

2 个答案: