jquery mobile issue with data-column-btn positioning when allowing horizontal scrolling

I am showing a data table in jquery mobile using the column toggle button for a responsive design. However, I've also added <div style="overflow:auto"> so that the user is able to scroll horizontally, if they choose to be able to view too many items for the screen (some may argue that this defeats the purpose but this is to display reports so the user may want this feature).

Anyway, my problem is that when the user scrolls horizontally along the table, the data-column-btn gets moved along with the rest of the table. Is there a way that I can "stick" the button to the top right hand corner, so even as the rest of the table scrolls, the button remains in the same position?

JS Fiddle here: http://jsfiddle.net/LuA8m/

Thanks everyone :)

Solution

You can use JavaScript to move the button into another DIV. First create an empty placeholder DIV above the table wrapper and give the table wrapper DIV a width of 100%:

<div id="colTogglePlaceholder"></div>
<div style="overflow:auto; width: 100%; ">  
    <table  data-role='table' data-theme='a' id='customerListTable' data-mode='columntoggle' class="ui-body-b ui-shadow table-stripe ui-responsive" data-column-btn-mini="true" data-column-btn-text="Columns to Display" data-column-btn-corners="false" data-column-btn-theme="c" data-column-popup-theme="a" >
        <thead>
            <tr>
               etc.

Then use the jQuery appendTo() method to move the button into the placeholder DIV:

$(document).on("pageinit", "#customerList", function () {
    $(".ui-table-columntoggle-btn").appendTo("#colTogglePlaceholder");
});

Here is your updated FIDDLE

NOTE: this also works in jQM 1.4