javascript - 如何让固定标题在滚动 html 表中工作(当标题有多行时)

Question

我设法在使用 this plugin 的滚动表中获得固定标题(并且还尝试了许多其他的)......有一个问题。

如果我们的表在标题中有多行，它们都不起作用。

例如

想象一下这样的表格:

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

当我取出 <thead> 中的两行中的任何一行时，我链接的插件和许多其他解决方案都有效。但是，对于某些表格，它们必须同时具有列标题和表格名称，因此删除两者之一根本不是一种选择。

有没有办法将标题中的两行合并为 html 中的一行？或者有没有办法让插件很好地处理标题中的多行？我一直在用谷歌搜索带有固定标题的滚动表，但我还没有找到任何适用于标题中多行的表格。

Answer 1

也许试试这样的方法，如果这样做，表格标题应该占据整个宽度

 <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>