How get header of the table fixed ?

Question

How get header of the table fixed while the table data is scrolling down via jquery ! the height of the table fixed

<html>
 <body>
  <style type="text/css">
   <table class="fx">
    <tbody>
      <tr>
       <th>Email ID</th>
       <th>Time Taken to complete game (secs)</th>
       <th>Email ID</th><th>Time Taken to complete game (secs)</th>
      </tr>
    </tbody>
   </table>
 </div>
 <table class="data">
  <tbody>
   <tr>
    <td>asd@gmail.com</td>
    <td>449</td>
    <td>asd@gmail.com</td>
    <td>449</td>
   </tr>
   <tr>
   <tr>
    <td>sad@gmail.com</td>
    <td>449</td><td>asd@gmail.com</td>
    <td>449</td>
   </tr>
   <tr>
    <tr>
     <td>as@gmail.com</td>
     <td>449</td>
     <td>asd@gmail.com</td>
     <td>449</td>
    </tr>
     <tr> 
   </tr>
  </tbody>
 </table>

    table tbody
    {
       display: block;
    height: 262px;
    overflow: auto;
          }
      table {
    table-layout: fixed;
    height: 100px;
    overflow: auto;
    padding: 10px;
    }
    table tr{
        background-color: #F5F5F5;
    }
    table tr:nth-child(odd){

        background-color: #eee;
    }
    table tr:nth-child(even){

        background-color: #F5F5F5;
    }
    table tr td{
        padding:10px;
        width: 200px; 
         max-width: 200px;
        word-wrap:break-word;
        height: auto;
        text-align: center;
        color:#5d8d5d;
    }
    .fx{
         position: fixed;
      top: 0;

      left: 0;
      }

      .fx tr th {
        padding:10px;
        background-color: #ddd;
        width: 200px;
        color:#6d4d9d;
        text-align: center;

    }

    .data{
      margin-top: 70px;
    }

    div{
      position: relative;

    }
    *{
      margin: 0;
      padding: 0;
    }

    </style>
    <div>



    </body>
    </html>

How get header of the table fixed while the table data is scrolling down via jquery ! the height of the table need urgently

Take a look here: http://stackoverflow.com/questions/4709390/table-header-to-stay-fixed-at-the-top-when-user-scrolls-it-out-of-view-with-jque — pschueller, Dec 19 '13 at 10:35
*need urgently smells bad*, it shows your boss is going to smack you up.. anyways, your table seems to have a fixed `width` so you can try this http://stackoverflow.com/a/17828082/1542290 .. by the way that's **PURE CSS** — Mr. Alien, Dec 19 '13 at 10:36
Why your `table` markup is within the `style` tag? Also, there's an extra `` there. — emerson.marini, Dec 19 '13 at 11:05

Vishal Patel · Answer 1 · 2014-01-10T07:12:45.210

See this LINK

OR

Could you please try this...

CSS Style :

<style>
        table tbody
    {
        display: block;
        height: 262px;
        overflow: auto;
    }
    table
    {
        table-layout: fixed;
        height: 100px;
        overflow: auto;
        padding: 0px;
    }
    table tr
    {
        background-color: #F5F5F5;
    }
    table tr:nth-child(odd)
    {
        background-color: #eee;
    }
    table tr:nth-child(even)
    {
        background-color: #F5F5F5;
    }
    table tr td
    {
        padding: 0px;
        width: 200px;
        max-width: 200px;
        word-wrap: break-word;
        height: auto;
        text-align: center;
        color: #5d8d5d;
    }
    .fx
    {
        position: fixed;
        top: 0;
        left: 0;
       min-width:850px;
       width:850px;
    }

    .fx tr th
    {
        padding: 10px;
        background-color: #ddd;
        width: 175px;
        min-width: 175px;
        color: #6d4d9d;
        text-align: center;
    }

    .data
    {
        margin-top: 0px;
        min-width:850px;
        width:850px;
        left: 0;
    }
    .data tr th
    {
        padding: 10px;
        width: 175px;
        min-width: 175px;
        text-align: center;
    }

    div
    {
        position: relative;
    }
    *
    {
        margin: 0;
        padding: 0;
    }
    </style>

HTML :

<table class="fx">
        <tbody>
            <tr>
                <th>
                    Email ID
                </th>
                <th>
                    Time Taken to complete game (secs)
                </th>
                <th>
                    Email ID
                </th>
                <th>
                    Time Taken to complete game (secs)
                </th>
            </tr>
        </tbody>
    </table>
    <div id="data" style="valign: top; overflow: auto; min-width:850px; height: 100px; margin-top: 60px;
        padding-top: 0px">
        <table class="data">
            <tbody>
                <tr>
                    <th>
                        asd@gmail.com
                    </th>
                    <th>
                        449
                    </th>
                    <th>
                        asd@gmail.com
                    </th>
                    <th>
                        449
                    </th>
                </tr>
                <tr>
                    <tr>
                        <th>
                            sad@gmail.com
                        </th>
                        <th>
                            449
                        </th>
                        <th>
                            asd@gmail.com
                        </th>
                        <th>
                            449
                        </th>
                    </tr>
                    <tr>
                        <tr>
                            <th>
                                as@gmail.com
                            </th>
                            <th>
                                449
                            </th>
                            <th>
                                asd@gmail.com
                            </th>
                            <th>
                                449
                            </th>
                        </tr>
                        <tr>
                        </tr>
            </tbody>
        </table>
    </div>

Its not working as expected sorry, but thanks actually you can the column lines of the td are not properly aligned to the header lines they are moving a apart ! — Suraj Rawat, Jan 10 '14 at 06:12
@user3011961 But function which you need (stick header and just move records) is fulfill or not? if it is fulfill then I can align record's lines with header columns line. — Vishal Patel, Jan 10 '14 at 06:18
yeah partially but i want aligned col lines , thanx in advance — Suraj Rawat, Jan 10 '14 at 06:28
the straight lines of td section is moving away from th section line(borders) — Suraj Rawat, Jan 10 '14 at 09:07
@user3011961 You are wasting my time. I think you need to learn HTML and CSS from basic. because after this much help you can't do anything from your side. — Vishal Patel, Jan 10 '14 at 09:11
First of all my friend if you want points here then give correct solutions second thing is no body ask to to come here and help so don't give idiotic excuses ! — Suraj Rawat, Jan 10 '14 at 09:13
@user3011961 I don't want points. We are here to improve my knowledge but your requirement are very in each communication. You need scrollable item with sticky header. I have give you that, but now your requirement is changed. :) — Vishal Patel, Jan 10 '14 at 09:16
@user3011961 You have to put some efforts from your side also. — Vishal Patel, Jan 10 '14 at 09:18
Thanks for the gentle reply , and sorry if question varied may be you are right , Thx bydway for your time ! — Suraj Rawat, Jan 10 '14 at 09:19
@user3011961 I do not want to waste more my and your time also. — Vishal Patel, Jan 10 '14 at 09:24

How get header of the table fixed ?

1 Answers1