Martin Mulholland Martin Mulholland - 2 years ago 86
HTML Question

jQuery Mobile Reflow Table Headers Disappears

I have tried adding a jQuery reflow table to my website but when it goes to mobile the top row table headers disappear when they should appear beside the


Top row TH not displaying

I can't use jsfiddle as it uses the cdn for jQuery Mobile which seems to work fully but I can't use the CDN as it breaks the site.
Web Page:
Test Web Page


<table data-role="table" id="result" data-mode="reflow" class="ui-responsive ui-table ui-table-reflow table-stroke">
      <th>Movie Title</th>
      <th><abbr title="Rotten Tomato Rating">Rating</abbr></th>
      <td class="title"><a href="" data-rel="external">Citizen Kane</a></td>
      <td>Orson Welles</td>
      <td class="title"><a href="" data-rel="external">Casablanca</a></td>
      <td>Michael Curtiz</td>

I downloaded the custom build for jQuery reflow from the website, so maybe it is missing some modules? It works using the full download or CDN.

Answer Source

It appears the key is to add the Core Init package when creating your customized build. Here are the options I had to select (which will auto-select some other dependencies) when building the customized build:

  • Core
    • Init
  • Widgets
    • Table: reflow

As mentioned, selecting these will select a bunch of other required packages. But the result will be the table works as expected on smaller screens, with the table headers placed next to the table rows.

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download