如何获得固定的标题以在滚动html表中工作（标题有多行时）

Question

I managed to get fixed header in scrolling table working with this plugin (and also tried numerous other ones)... with a catch.

None of them work if our tables have multiple rows in the header.

eg

Think of a table like this:

<table>
  <thead>
  <tr>
    title of the table
  </tr>
  <tr>
    <th>col 1</th>
    <th>col 2</th>
    ...
  </tr>
  </thead>
  ...

When I take out either of the two rows in <thead> , the plugin I linked and many other solutions work. However, for some of the tables they HAVE to have both the column headers AND the table name, so removing one of the two simply isn't an option.

Is there a way to merge the two rows in the header to one in html? Or is there a way to get the plugins to work nicely with multiple rows in the header? I have been googling around a ton on the scrolling tables with fixed headers, but I've yet to find any that works with multiple rows in the header.

Answer 1

Maybe try something like this, the Table Title should take up the whole width if done this way

 <thead>
  <tr>
    <div id="table_head_div">

        <div id="table_title" style="height:50%; width:100%; margin:0; padding:0;">Table Title</div>

        <div id="column_titles" style="height:50%; width:100%; margin:0; padding:0;">
            <div class="column_title">column 1</div>
            <div class="column_title">column 2</div>
            <div class="column_title">column 3</div>
        </div>

    </div>
  </tr>
  </thead>