Geek Answers Handbook

Fixed table header with dynamic content?

I found several solutions for a fixed header, but none of them fix my problem.

I have a table with jQuery mobile style (responsive table). This table is dynamically populated with .append. Columns do not have a fixed width; they change. Is there a way to fix the table title so that I can scroll through the body of the table with a heading that always appears at the top, but without using multiple tables.

Summary:

I would like to have a separate table with a fixed header.

I am surprised that there is no standard for this, as I assume that this is what most webdev can use. Please correct me if I am wrong.

Thank you in advance!

Edit:

Example:

<table id="my_id" data-role="table" class="ui-body-d ui-shadow table-stripe
 ui-responsive">
    <thead id="must_be_static">
       <tr>
          <th>This guy should be static</th>
          <th>This guy should be static</th>
          <th>This guy should be static</th>
          <th>This guy should be static</th>
          <th>This guy should be static</th>
       </tr>
    </thead>
    <tbody id="id_for_content">
       <tr>
          <td>Dynamic content</td>
          <td>Dynamic content</td>
          <td>Dynamic content</td>
          <td>Dynamic content</td>
          <td>Dynamic content</td>
       </tr>
    </tbody>
    <tfoot>
       <tr>
          <td>Foot</td>
          <td>Foot</td>
          <td>Foot</td>
          <td>Foot</td>
          <td>Foot</td>
       </tr>
    </tfoot>
</table>
+4
2

:

http://jsfiddle.net/h5t98/

    <table border="1">
  <thead>
    <tr>
      <th class="month">Month</th>
      <th class="saving">Savings</th>
    </tr>
  </thead>
  <tfoot>
    <tr>
      <td>Sum</td>
      <td>$180</td>
    </tr>
  </tfoot>
  <tbody>
    <tr>
      <td>February</td>
      <td>$80</td>
    </tr>
      <tr>
      <td>January</td>
      <td>$100</td>
    </tr>
  </tbody>
</table>
0

More articles:


All Articles