1

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.

Brian Tompsett - 汤莱恩
  • 5,753
  • 72
  • 57
  • 129
user1397770
  • 135
  • 3
  • 16
  • You could just use like this: `document.getElementById('yourId').style.position = 'fixed';` instead of using in your css. Also check this http://stackoverflow.com/questions/673153/html-table-with-fixed-headers The above code is just an example of how to use the css function in javascript. – Vimalnath May 16 '12 at 05:55
  • my table is dynamically generated ..this ones not working – user1397770 May 16 '12 at 07:12

3 Answers3

0

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.

Renato
  • 12,940
  • 3
  • 54
  • 85
0

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.

Agustín Ríos Reyes
  • 31
  • 1
-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.

xiaoyi
  • 6,641
  • 1
  • 34
  • 51
  • This description doesn't read as "relatively simple"! If it is simple, why not provide a complete example? And if it is not simple, why not provide a complete example? – Andrew Leach May 16 '12 at 07:05
  • @AndrewLeach: it's relatively simple compare to fixed column. But it's still complex for a complete and generic answer. My description can be turned into working script with little work. Don't be too judgmental! – xiaoyi May 16 '12 at 11:58