Responsive tables

Tables present a particular difficulty for mobile browsers. Generally, tables consist of a large amount of data. This could take up the entire screen of a desktop browser. On a mobile browser, this can be even more condensed. In the folder of this chapter's source code, take a look at test_table.html. We won't print the code here, but it is a rather simple four-column, four-row table. On a mobile device, this information will barely fit:

jQuery Mobile can make this work better by creating a responsive version of the table. There are a few small changes you must make to your tables to enable this feature. First, ensure your table makes use of the thead and tbody blocks. The previous example, test_table.html, did this already. The code in Listing 7-7 demonstrates what else we have to do to make the table responsive:

Listing 7-7: test_resp_table.html
<table data-role="table" id="table1" data-mode="reflow">
   <thead>
    ...