Freeze the first 2 rows of a table

Question

I have seen Jquery plugins and CSS styles to freeze the header of a table. Is there any to Freeze the first two rows. My second row contains a text box for search. I can't give fixed width for rows.

 <table>
 <thead>
  <tr>
     <th>Month</th>
     <th>Savings</th>
  </tr>
 </thead>
<tbody>
  <tr>
     <td><input type="text"/></td>
     <td><input type="text"/></td>
  </tr>
  <tr>
     <td>February</td>
     <td>$80</td>
  </tr>
 </tbody>
</table>

well, what happens when you add `position: fixed;` then? you can target the first table rows with CSS using `tr:nth-child(-n+2)` pseudo selector — Aziz, Feb 03 '16 at 13:03
Whatever CSS styles are applied to the header row by those plugins will also need to be applied to `tbody tr:first-child`. — Matt Browne, Feb 03 '16 at 13:06
@MattBrowne when I use a plugin and while the page is rendered when I inspect what I see is another table is formed just for the header part, instead of css styling — Ajay Bhasy, Feb 03 '16 at 13:10
OK Maybe you can help us understand what you are trying to achieve by showing us a demo or something similar — Aziz, Feb 03 '16 at 13:10
https://jsfiddle.net/onxzsqjv/ in this fiddle I have created a table. what I want is the First 2 rows ie the Header row and Row containing text box to be fixed while scrolling. — Ajay Bhasy, Feb 03 '16 at 13:14
Have you tried putting the second row inside `` also and using the plugin you mentioned? Even if that doesn't work, it's probably more semantically correct for the second row to be inside ``. — Matt Browne, Feb 03 '16 at 13:16
When I put the second row inside thead the css styling breaks — Ajay Bhasy, Feb 03 '16 at 13:19
In my experience, there's always a gotcha trying this sort of thing with CSS. I opted to use [DataTables](https://datatables.net/). It clones bits and pieces, but I believe it does so in an accessible way and also has a number of useful plugins to extend / provide more functionality. — Karl Dawson, Feb 03 '16 at 13:36

score 0 · Accepted Answer · edited May 23 '17 at 11:52

It looks like @KarlDawson's suggestion of using DataTables will work. Here's a working demo: http://jsfiddle.net/C8Dtf/1903/

<table cellpadding="0" cellspacing="0" border="0" class="display" id="example">
    <thead>
        <tr>
            <th>Rendering engine</th>
            <th>Browser</th>
            <th>Platform(s)</th>
            <th>Engine version</th>
            <th>CSS grade</th>
        </tr>
        <!-- 2nd header row that will also be frozen -->
        <tr>
            <th>2Rendering engine</th>
            <th>2Browser</th>
            <th>2Platform(s)</th>
            <th>2Engine version</th>
            <th>2CSS grade</th>
        </tr>
    </thead>
    <tbody>
        <tr class="gradeX">
            <td>Trident</td>
            <td>Internet
                 Explorer 4.0</td>
            <td>Win 95+</td>
            <td class="center">4</td>
            <td class="center">X</td>
        </tr>
        <tr class="gradeC">
            <td>Trident</td>
            <td>Internet
                 Explorer 5.0</td>
            <td>Win 95+</td>
            <td class="center">5</td>
            <td class="center">C</td>
        </tr>
        ...
    </tbody>
</table>

JS:

$(document).ready( function () 
{
    var iStart = new Date().getTime();
    var oTable = $('#example').dataTable( 
    {
        "sScrollY": "300px",
        "sScrollX": "100%",
        "sScrollXInner": "150%",
        "bScrollCollapse": true,
        "bPaginate": false,
        "bFilter": false
    } );
    new FixedColumns( oTable, 
    {
        "sHeightMatch": "none"
    } );
} );

Adapted from this answer: https://stackoverflow.com/a/15826692/560114. I'm not familiar with the details of the DataTable plugin, but it should be possible to adapt your HTML so that it works similarly to this demo.

score 0 · Answer 2 · answered Feb 03 '16 at 14:12

0

I think you want something like this-

This is pure css no other script is needed..

Checkout this url:

codepen.io/mastershine/pen/gPdaPL

answered Feb 03 '16 at 14:12

webmasteravi

1
1

Hi, webmasteravi. Please read “[How do I write a good answer](http://stackoverflow.com/help/how-to-answer)” – fusion3k Feb 03 '16 at 14:27
@webmasteravi In the example the second row is not fixed (freezed) it moves upwards on scrolling. – Ajay Bhasy Feb 05 '16 at 05:37
@webmasteravi external links without accompanying code excerpts are problematic because sometimes links to down or are unavailable...and answers on SO should be at least somewhat complete without depending on external links. – Matt Browne Feb 05 '16 at 11:39

Freeze the first 2 rows of a table

2 Answers2