jQuery Mobile Reflow Table Headers Disappears

Question

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 <td> content.

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

The HTML:

<table data-role="table" id="result" data-mode="reflow" class="ui-responsive ui-table ui-table-reflow table-stroke">
  <thead>
    <tr>
      <th>Rank</th>
      <th>Movie Title</th>
      <th>Year</th>
      <th><abbr title="Rotten Tomato Rating">Rating</abbr></th>
      <th>Reviews</th>
      <th>Director</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th>1</th>
      <td class="title"><a href="http://en.wikipedia.org/wiki/Citizen_Kane" data-rel="external">Citizen Kane</a></td>
      <td>1941</td>
      <td>100%</td>
      <td>74</td>
      <td>Orson Welles</td>
    </tr>
    <tr>
      <th>2</th>
      <td class="title"><a href="http://en.wikipedia.org/wiki/Casablanca_(film)" data-rel="external">Casablanca</a></td>
      <td>1942</td>
      <td>97%</td>
      <td>64</td>
      <td>Michael Curtiz</td>
    </tr>
  </tbody>
</table>

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 1

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.