jQuery Mobile Tables

Responsive Tables

Responsive design is typically used to adapt to various mobile devices.

By simply using a simple class name, jQuery Mobile automatically adjusts the page content based on screen size.

Responsive tables ensure that page content fits well on both mobile and desktop devices.

There are two types of responsive tables: reflow and column toggle.

Reflow Table

The reflow model table displays horizontally when the screen size is large enough, and vertically when the screen size is small enough.

To create a table, add the data-role="table" and ui-responsive classes to the <table> element:

Example

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

| | For responsive tables, you must include <thead> and <tbody> elements. <br> Do not use rowspan or colspan attributes; they are not supported in responsive tables. | | --- | --- |

Column Toggle

The column toggle model hides data when the width is insufficient.

To create a column toggle table:

<table data-role="table" data-mode="columntoggle" class="ui-responsive" id="myTable">

By default, jQuery Mobile hides columns on the right side of the table. However, you can specify the order of hidden columns by adding the data-priority attribute to the table headers (<th>), with values ranging from 1 (highest priority) to 6 (lowest priority):

<th>I will never be hidden</th>
<th data-priority="1">I am a very important column - I will not be hidden</th>
<th data-priority="3">I am an important column - I may be hidden</th>
<th data-priority="5">I am a less important column - I will be hidden first</th>

| | If you do not specify a priority for a column, it will always be visible and not hidden. | | --- | --- |

Combining the above codes creates a column toggle table, allowing users to customize which columns to hide:

Example

<table data-role="table" 
    data-mode="columntoggle" class="ui-responsive" 
        id="myTable">  
        <thead>    <tr>      <th 
        data-priority="6">CustomerID</th>      <th>CustomerName</th>      
        <th data-priority="1">ContactName</th>      
        <th data-priority="2">Address</th>      <th 
        data-priority="3">City</th>      <th 
        data-priority="4">PostalCode</th>      <th 
        data-priority="5">Country</th>    </tr>  </thead> 
        <tbody>    <tr>      <td>1</td>      <td>Alfreds 
        Futterkiste</td>      <td>Maria Anders</td>
              <td>Obere Str. 57</td>
             
        <td>Berlin</td>      <td>12209</td>      <td>Germany</td>    </tr>  
        </tbody></table>

You can use the data-column-btn-text attribute to modify the text for toggling columns:

Example

<table data-role="table" 
    data-mode="columntoggle" class="ui-responsive"
        data-column-btn-text="Click me to show or hide columns!" 
        id="myTable">

Table Styling

Use the ui-shadow class to add a shadow to the table:

Add Shadow

<table data-role="table" 
    data-mode="columntoggle" class="ui-responsive ui-shadow" 
        id="myTable">

Further style the table using CSS:

Add Bottom Border to All Rows

<style>tr {    border-bottom: 1px solid #d6d6d6;}
        </style>

Add Button to <th> Elements and Background to Even Rows

<style>th {    border-bottom: 1px solid 
        #d6d6d6;}tr:nth-child(even) {    background: #e9e9e9;}
        </style>