Convert horizontal table to vertical

Question

I'm using bootstrap in order to display responsive table.

The table is horizontal and contain 2 rows - title and data.

Is there any script that flip the table and display in vertical when user use mobile?

<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>

You could only use css, read here https://css-tricks.com/responsive-data-tables/ — Alen.Toma, Jul 29 '19 at 10:30
you can use this plugins https://www.jqueryscript.net/table/Transpose-Table-jQuery-Plugin.html, https://github.com/riteshgandhi/jquery.table.transpose either you can refer this url https://stackoverflow.com/questions/25792178/jquery-to-transpose-html-table-with-header-and-footer — DHARMENDRA SINGH, Jul 29 '19 at 10:33

Sandeep · Answer 1 · 2019-07-30T09:55:28.440

I am not aware about PHP Code, but I am providing you HTML Code that will help you. Or you can just use this css into your code and add class '.table_card_view' in table tag.

  <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>

hi. does it work for you? I tried it and the title row (first row) doesn't appear at all... — Roi, Jul 30 '19 at 09:42
In this code title row can not display separately, the table in mobile view display like, Date : 23 July 2019, next line Time : 10:20 PM. Your Title Display first then its value. — Sandeep, Jul 30 '19 at 09:51

Bilal Ahmed · Answer 2 · 2019-07-30T10:56:33.627

You're using Bootstrap, Great. Perhaps, writing your own customized script will be time consuming. However, there are several plugins that you can use to achieve what is required. One of them is DataTable.js - Responsive plugin. All you have to do is to add this plugin in your project and then simply add below script :

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

The above plugin will convert horizontal columns into vertical structure according to window size:

Take a look at this example. Hope, this example fits your requirement. Try resizing your browser window to understand Horizontal/Vertical nature.

Hope this helps :)

Convert horizontal table to vertical

2 Answers2