1

I am using a table markup styled with JQuery Mobile for a very long table. When the user scrolls down the table head is not visible anymore causing my table to be less clearly arranged. My question is how I can repeat the table head in order to be always visible.

I have tried the follwing solution, however it has not worked. Below you can find my code for displaying the table (it's a Mako template).

<table data-role="table" data-mode="reflow" class="ui-responsive" id="tAreaAnalysis">
    <thead>
        <tr>
            <th>&nbsp</th>
            <th colspan="3" class="textCenter borderLeft">Gesamtumsatz</th>

            % for actually_printed_product_category in product_categories:
                <th colspan="3" class="textCenter borderLeft">${actually_printed_product_category.name}</th>
            % endfor
        </tr>
        <tr class="borderBottom">
            <th>Kunde</th>
            <th class="borderLeft">VZR 1</th>
            <th>VZR 3</th>
            <th>VZR 4</th>

            % for actually_printed_product_category in product_categories:
                <th class="borderLeft">VZR 1</th>
                <th>VZR 2</th>
                <th>VZR 3</th>
            % endfor
        </tr>
    </thead>
    <tbody>
    </tbody>
</table>

Thanks a lot.

Lukas
  • 756
  • 7
  • 20
  • Could this be an alternative solution? http://stackoverflow.com/questions/17584702/how-to-add-a-scrollbar-to-an-html5-table – Gjermund Dahl Jun 16 '16 at 11:54
  • I am afraid this does not solve my problem, as two separate table elements encapsulated within `div`s are used for the tables. However, I am using jQuery Mobile for building a responsive application and thus I need to use one table. – Lukas Jun 20 '16 at 05:55

1 Answers1

1

I also face that error last year. But I found only single solution regarding this situation. I used Mozilla firefox to overcome this situation. That was working for me then. Because in firefox they show table head every time in every page. You have to write your head section code in block. You should try in Mozilla, it may work there.

Love Chaudhary
  • 302
  • 2
  • 13
  • I would be most graceful if you could provide an example showing how to write the head section code in block. – Lukas Jun 14 '16 at 07:31
  • ` Data/Code/Dummy Data/Code/Dummy ` – Love Chaudhary Jun 14 '16 at 07:32
  • Because that code I wrote for my company, and now I am not liable to do such thing in that dept, because my dept has been changed. Hope this will be helpful for you – Love Chaudhary Jun 14 '16 at 07:35
  • I have already tried to accomplish that, but it has not worked. I guess that jQuery Mobile overrides Firefox's behaviour in some way. – Lukas Jun 14 '16 at 07:42