我们如何冻结html表中的第一列和标题（具有多行）

Question

I have tried so many solutions to freeze first column and header(which have multiple rows) but in every solution i have to user custom css (css according to solutions).

In my case I cannot change my previous css. I want code in which on div scroll I can freeze my table(which is dynamic).

Please provide solution.

Answer 1

I've done this like this:

<table style="table-layout: fixed">
    <tr>
        <td><div style="width:100px; position:fixed;">Frozen Header text</div></td>
    </tr>
    <tr>
        <td>Some data</td>
    </tr>
<table>

I am not sure how to get the first column frozen as well, but I suppose you can attempt to use the same strategy, as well as formatting using the <col> tag, similar to this:

<col style="width:100px; position:fixed;" />

Try that, and please let us know how you go.

Answer 2

To achieve what I comets jquery and css use. Here the plugin: link

This is a jQuery plugin that can make table rows and columns not scroll.

It can take a given HTML table object and set it so it can freeze a given number of columns or rows or both, so the fixed columns or rows do not scroll.

The rows to be frozen should be placed in the table head section.

It can also freeze rows and columns combined with using colspan or rowspan attributes.

Answer 3

Fix header is relative simple and easy to implement. and column is a different thing.

for example:

<table>
  <tr class="header"><td>header</td></tr>
  <tr><td>body</td></tr>
</table>

You have to monitor onscroll envent, and detect if the header is out of view. When it's out of view, retrieve tr.header's size parameters (also include TDs inside), and its clientX and clientY by using getBoundingClientRect(). make a clone of tr.header by using cloneElement(true) and place it in the same table. then assign size parameters to its TDs, and make this cloned element fixed to screen.

This solution won't not affect your table's styles or layout, while it is complex indeed.