css problem with Column Toggle
Hello,
I'm trying to dynamically load content of the table on button click, in a.html i have:
-
- <!doctype html>
- <html lang="en">
- <head>
- <meta charset="utf-8">
- <meta name="viewport" content="width=device-width, initial-scale=1">
- <title>table-columntoggle demo</title>
- <link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.css">
- <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
- <script src="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.js"></script>
- <script type="text/javascript">
- function test() {
- $('#myDiv').load('b.html', function() {
- $('#myDiv').trigger("create");
- });
- }
- </script>
- </head>
- <body>
- <div id="#myDiv">
- </div>
- <input type="button" onclick="test()"/>
- </body>
- </html>
and in b.html:
- <table data-role="table" id="table-column-toggle" data-mode="columntoggle" class="ui-responsive table-stroke">
- <thead>
- <tr>
- <th data-priority="2">Rank</th>
- <th>Movie Title</th>
- <th data-priority="3">Year</th>
- <th data-priority="1"><abbr title="Rotten Tomato Rating">Rating</abbr></th>
- <th data-priority="5">Reviews</th>
- </tr>
- </thead>
- <tbody>
- <tr>
- <th>1</th>
- <td><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>
- </tr>
- </tbody>
- </table>
but when i click on the columns button the popup looks weird, namely there are spaces there. What can be done to overcome issue?
Thanks in advance :)