Jquery Mobile's Table is not Responsive?

Question

I am using a simple table from jquery mobile site. Here is my page html,

    <div data-role="page" id="mainPage">
        <div data-role="content">

            <table data-role="table" id="my-table" data-mode="reflow">
                <thead>
                    <tr>
                        <th>Rank</th>
                        <th>Movie Title</th>
                        <th>Year</th>
                        <th>
                            <abbr title="Rotten Tomato Rating">Rating</abbr></th>
                        <th>Reviews</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <th>1</th>
                        <td><a href="foo.com" data-rel="external">Citizen Kane</a></td>
                        <td>1941</td>
                        <td>100%</td>
                        <td>74</td>
                    </tr>
                </tbody>
            </table>
        </div>
    </div>

But my page is look like very ugly. Seems no jquery applied here. Here is the screen shot,

Answer 1

There is already a working responsive table jQM plugin available here: https://github.com/frequent/tableview.

It comes in two modes, non functional one which is only a tableview and functional one which comes in combination with database plugin.

Here's an demo: http://www.franckreich.de/jqm/tableview/demo.html.

Answer 2

From Here, http://forum.jquery.com/topic/where-to-get-jquery-mobile-table-js

The table functionality is only in the unreleased version 1.3.

If you want to test 1.3, you can check it out from GitHub and build it, or else just download the .js and .css files from the online test docs.

As this isn't even beta software yet, I wouldn't use it in production.