how to make the html table header fixed + Content above the table to be fixed

Question

please help, I have a html table , without changing the layout and responsive behavior - i want to make table header fixed - please suggest

https://codepen.io/shaswat/pen/EbwPNK

here want to implement table header and responsiveness of the table both together . which is not working

while scrolling down -- 3 headers and the table head should get fixed .

.rg-container {
  font-family: 'Lato', Helvetica, Arial, sans-serif;
  font-size: 16px;
  line-height: 1.4;
  margin: 0;
  padding: 1em 0.5em;
  color: #222;
}

.rg-header {
  margin-bottom: 1em;
  text-align: left;
}

.rg-header>* {
  display: block;
}

<h1>Some more Header information</h1>
<h2>Some more Header information</h2>
<h3>Header
  <div>
    <div class='rg-container'>
      <div class='rg-content'>
        <table class='rg-table'>
          <thead>
            <tr>
              <th class='text '>id</th>
              <th class='text '>somcol</th>
              <th class='text '>biggger id</th>
              <th class='text '>another id</th>
              <th class='text '>med col</th>
              <th class='text '>med col</th>
            </tr>
          </thead>
          <tbody>

            <tr class=''>
              <td class='text ' data-title='id'>id</td>
              <td class='text ' data-title='somcol'>somcol</td>
              <td class='text ' data-title='biggger id'>biggger id</td>
              <td class='text ' data-title='another id'>another id</td>
              <td class='text ' data-title='med col'>med col</td>
              <td class='text ' data-title='med col'>med col</td>
              <td class='text ' data-title='sheet'>sheet</td>
              <td class='text ' data-title='sheet'>sheet</td>
              <td class='text ' data-title='anotherbigcoloumn'>another big coloumn</td>
              <td class='text ' data-title='small'>small</td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>

Possible duplicate of [Freeze the top row for an html table only (Fixed Table Header Scrolling)](https://stackoverflow.com/questions/8423768/freeze-the-top-row-for-an-html-table-only-fixed-table-header-scrolling) — jhpratt, Nov 15 '17 at 20:08
not duplicate . tagged one only talks about the table header .but here table header plus the content above that . not able to do it . need help — Shaswata, Nov 15 '17 at 20:32
You did not say "table header plus the content above" in your question. You only asked about the table header. Exactly what content do you want to have fixed? — Holland Wilson, Nov 15 '17 at 20:41
in the question , i mentioned "while scrolling down -- 3 headers and the table head should get fixed ." — Shaswata, Nov 15 '17 at 20:44
please remove the duplicate - really stuck and want to have a solution — Shaswata, Nov 15 '17 at 21:29

Holland Wilson · Answer 1 · 2017-11-15T20:38:32.463

Try this:

<h3>Header
  <div>
    <div class='rg-container'>
      <div class='rg-content'>
        <table class='rg-table-head'>
          <thead>
            <tr>
              <th class='text '>id</th>
              <th class='text '>somcol</th>
              <th class='text '>biggger id</th>
              <th class='text '>another id</th>
              <th class='text '>med col</th>
              <th class='text '>med col</th>
            </tr>
          </thead>
        </table>
        <table class="rg-table-body">
          <tbody>

            <tr class=''>
              <td class='text ' data-title='id'>id</td>
              <td class='text ' data-title='somcol'>somcol</td>
              <td class='text ' data-title='biggger id'>biggger id</td>
              <td class='text ' data-title='another id'>another id</td>
              <td class='text ' data-title='med col'>med col</td>
              <td class='text ' data-title='med col'>med col</td>
              <td class='text ' data-title='sheet'>sheet</td>
              <td class='text ' data-title='sheet'>sheet</td>
              <td class='text ' data-title='anotherbigcoloumn'>another big coloumn</td>
              <td class='text ' data-title='small'>small</td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>
</h3>

CSS:

h3 table.rg-table-head {
  position: fixed;
}
h3 table.rg-table-body {
  padding-top: 1em;
}

Here it is on CodePen.

when i add this to my code pen , it freezes the whole page and scrollbar becomes invisible — Shaswata, Nov 15 '17 at 20:35
Sorry, I messed up the classes. I've added the class name to the first CSS rule and changed `body` to `rg-table-body` to better fit the theme of your class names. — Holland Wilson, Nov 15 '17 at 20:39

score 0 · Answer 2 · answered Nov 15 '17 at 20:38

0

In that case, you would need to set the header height, and put all content under the header.

The CSS:

.headers {
  position: fixed;
  height: 100px; /* However long you want the header background */
  top: 0;
  width: 100%;
}


/* Then, for the tables, you would set the **margin-top** to whatever the 
headers height is. */ 

.content {
  margin-top: 100px;
}

Next, just set the div id's:

The HTML:

<div id="headers">
/* Your headers */
</div>
<div id="content">
/* Your HTML content */
</div>

answered Nov 15 '17 at 20:38

Rilts

1
1

what about the table header – Shaswata Nov 15 '17 at 20:39
position fixed removes the whole scrolbar rom the page – Shaswata Nov 15 '17 at 20:41
Dang, I'm really not sure then. Ill keep a look out for that problem, and I will let you know If I find anything new. – Rilts Nov 16 '17 at 02:04

how to make the html table header fixed + Content above the table to be fixed

2 Answers2