How to create responsive tables using jQuery Mobile

Question

Can you tell me How to create responsive tables using jQuery Mobile?

Answer 1

The most reliable and maintainable method for responsive tables in jQuery Mobile is using the Reflow Table approach. It automatically converts the table into a stacked card layout on small screens while keeping the traditional table structure on larger screens.

Implementation:

<!-- Add 'data-role="table" and 'ui-responsive' class -->

<table data-role="table" class="ui-responsive">

  <thead>

    <tr>

      <th>Product</th>

      <th>Price</th>

      <th>Stock</th>

    </tr>

  </thead>

  <tbody>

    <tr>

      <td>Phone</td>

      <td>$599</td>

      <td>In Stock</td>

    </tr>

    <tr>

      <td>Laptop</td>

      <td>$999</td>

      <td>Out of Stock</td>

    </tr>

  </tbody>

</table>