CODEWITHSUNDEEP
htmlcss
dmikester1
dmikester1

Reputation: 1362

fixed page, content scrolling behind header

I am working on a website. I have most of the page fixed, except I want the table in the middle to scroll with the main scrollbar. Then I have an image in the background that I want to partially show through. I have it mostly working. The only part I cannot figure out is how to get the table content to go behind or even stop when it gets to the header. I will include a fiddle so you can see what I am talking about. HTML:

<body>
<div id="background"></div>
<div id="tableBackground"></div>
    <div id="fixedHeader">
        <h1>fixed header</h1>
        <h2>Subheading</h2>
    </div>
    <div id="tableContainer">
        <table class="stocks compact display cell-border">
            <tr><td>row 1 cell 1</td><td>row 1 cell 2</td></tr>
            <tr><td>row 2 cell 1</td><td>row 2 cell 2</td></tr>
            <tr><td>row 3 cell 1</td><td>row 3 cell 2</td></tr>
            <tr><td>row 4 cell 1</td><td>row 4 cell 2</td></tr>
            <tr><td>row 5 cell 1</td><td>row 5 cell 2</td></tr>
            <tr><td>row 6 cell 1</td><td>row 6 cell 2</td></tr>
            <tr><td>row 7 cell 1</td><td>row 7 cell 2</td></tr>
            <tr><td>row 8 cell 1</td><td>row 8 cell 2</td></tr>
            <tr><td>row 9 cell 1</td><td>row 9 cell 2</td></tr>
            <tr><td>row 10 cell 1</td><td>row 10 cell 2</td></tr>
            <tr><td>row 11 cell 1</td><td>row 11 cell 2</td></tr>
            <tr><td>row 12 cell 1</td><td>row 12 cell 2</td></tr>
            <tr><td>row 13 cell 1</td><td>row 13 cell 2</td></tr>
            <tr><td>row 14 cell 1</td><td>row 14 cell 2</td></tr>
            <tr><td>row 15 cell 1</td><td>row 15 cell 2</td></tr>
            <tr><td>row 16 cell 1</td><td>row 16 cell 2</td></tr>
            <tr><td>row 17 cell 1</td><td>row 17 cell 2</td></tr>
            <tr><td>row 18 cell 1</td><td>row 18 cell 2</td></tr>
            <tr><td>row 19 cell 1</td><td>row 19 cell 2</td></tr>
            <tr><td>row 20 cell 1</td><td>row 20 cell 2</td></tr>
            <tr><td>row 21 cell 1</td><td>row 21 cell 2</td></tr>
            <tr><td>row 22 cell 1</td><td>row 22 cell 2</td></tr>
            <tr><td>row 23 cell 1</td><td>row 23 cell 2</td></tr>
            <tr><td>row 24 cell 1</td><td>row 24 cell 2</td></tr>
            <tr><td>row 25 cell 1</td><td>row 25 cell 2</td></tr>
            <tr><td>row 26 cell 1</td><td>row 26 cell 2</td></tr>
            <tr><td>row 27 cell 1</td><td>row 27 cell 2</td></tr>
            <tr><td>row 28 cell 1</td><td>row 28 cell 2</td></tr>
            <tr><td>row 29 cell 1</td><td>row 29 cell 2</td></tr>
            <tr><td>row 30 cell 1</td><td>row 30 cell 2</td></tr>
            <tr><td>row 31 cell 1</td><td>row 31 cell 2</td></tr>
            <tr><td>row 32 cell 1</td><td>row 32 cell 2</td></tr>
            <tr><td>row 33 cell 1</td><td>row 33 cell 2</td></tr>
            <tr><td>row 34 cell 1</td><td>row 34 cell 2</td></tr>
            <tr><td>row 35 cell 1</td><td>row 35 cell 2</td></tr>
            <tr><td>row 36 cell 1</td><td>row 36 cell 2</td></tr>
            <tr><td>row 37 cell 1</td><td>row 37 cell 2</td></tr>
            <tr><td>row 38 cell 1</td><td>row 38 cell 2</td></tr>
            <tr><td>row 39 cell 1</td><td>row 39 cell 2</td></tr>
            <tr><td>row 40 cell 1</td><td>row 40 cell 2</td></tr>
            <tr><td>row 41 cell 1</td><td>row 41 cell 2</td></tr>
            <tr><td>row 42 cell 1</td><td>row 42 cell 2</td></tr>
            <tr><td>row 43 cell 1</td><td>row 43 cell 2</td></tr>
            <tr><td>row 44 cell 1</td><td>row 44 cell 2</td></tr>
            <tr><td>row 45 cell 1</td><td>row 45 cell 2</td></tr>
            <tr><td>row 46 cell 1</td><td>row 46 cell 2</td></tr>
        </table>
    </div>
</body>

CSS:

    html { 
    background: url(http://oi65.tinypic.com/29dhf6g.jpg) no-repeat center center fixed; 
   -webkit-background-size: cover;
   -moz-background-size: cover;
   -o-background-size: cover;
   background-size: cover;
}

html,body{
  margin: 0;
  padding: 0;
}

#background {
    position: fixed;
    top: 0;
    left: 0;
    z-index: -10;
    width: 100%;
    height: 100%;
}

#tableBackground {
    position: fixed;
    width: 90%;
    height: 100%;
    max-width: 1200px;
    margin: 0 auto;
    background: rgba(255, 255, 255, 0.8);
    left: 0;
    right: 0;
    z-index: 0;
}

#fixedHeader {
    position: fixed;
    left: 50%;
    top: 0;
    margin-left:-600px;
    width: 1200px;
    height: 80px;
    z-index: 10;
}

#tableContainer {
    position: relative;
    top: 80px;
    width: 1200px;
    margin: 0 auto;
}

.stocks {
    margin: 20px auto;
}

h1 {
    font-size: 1.4em;
    text-align: center;
}

h2 {
    font-size: 1.2em;
    text-align: center;
}

And here is my fiddle so you can see what exactly I am describing. You can see the table content shows behind the header when it scrolls up. I want it to hide when it gets to the header.

Upvotes: 6

Views: 12408

Answers (4)

Noopur Dabhi
Noopur Dabhi

Reputation: 1927

CSS:

html,
body {
    margin: 0;
    padding: 0;
}
#background {
    background: url(http://oi65.tinypic.com/29dhf6g.jpg) no-repeat center center fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    position: fixed;
    top: 0;
    left: 0;
    z-index: -10;
    width: 100%;
    height: 100%;
}
#tableBackground {
    position: fixed;
    top: 30px;
    width: 90%;
    height: 100%;
    max-width: 1200px;
    background: rgba(255, 255, 255, 0.8);
    left: 0;
    right: 0;
    z-index: 0;
    margin: 0 auto;
}
#fixedHeader {
    position: fixed;
    overflow: hidden;
    left: 50%;
    top: 30px;
    margin-left: -600px;
    width: 1200px;
    height: 80px;
    z-index: 10;
}
#tableContainer {
    height: 80%;
    overflow: auto;
    position: fixed;
    top: 120px;
    width: 100%;
    margin: 0 auto;
}
.stocks {
    margin: 20px auto;
}
h1 {
    font-size: 1.4em;
    text-align: center;
}
h2 {
    font-size: 1.2em;
    text-align: center;
}

Here is working fiddle.

html,
body {
  margin: 0;
  padding: 0;
}
#background {
  background: url(http://oi65.tinypic.com/29dhf6g.jpg) no-repeat center center fixed;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  position: fixed;
  top: 0;
  left: 0;
  z-index: -10;
  width: 100%;
  height: 100%;
}
#tableBackground {
  position: fixed;
  top: 30px;
  width: 90%;
  height: 100%;
  max-width: 1200px;
  background: rgba(255, 255, 255, 0.8);
  left: 0;
  right: 0;
  z-index: 0;
  margin: 0 auto;
}
#fixedHeader {
  position: fixed;
  overflow: hidden;
  left: 50%;
  top: 30px;
  margin-left: -600px;
  width: 1200px;
  height: 80px;
  z-index: 10;
}
#tableContainer {
  height: 80%;
  overflow: auto;
  position: fixed;
  top: 120px;
  width: 100%;
  margin: 0 auto;
}
.stocks {
  margin: 20px auto;
}
h1 {
  font-size: 1.4em;
  text-align: center;
}
h2 {
  font-size: 1.2em;
  text-align: center;
}
<body>
  <div id="background"></div>
  <div id="tableBackground"></div>
  <div id="fixedHeader">
    <h1>fixed header</h1>
    <h2>Subheading</h2>
  </div>
  <div id="tableContainer">
    <table class="stocks compact display cell-border">
      <tr>
        <td>row 1 cell 1</td>
        <td>row 1 cell 2</td>
      </tr>
      <tr>
        <td>row 2 cell 1</td>
        <td>row 2 cell 2</td>
      </tr>
      <tr>
        <td>row 3 cell 1</td>
        <td>row 3 cell 2</td>
      </tr>
      <tr>
        <td>row 4 cell 1</td>
        <td>row 4 cell 2</td>
      </tr>
      <tr>
        <td>row 5 cell 1</td>
        <td>row 5 cell 2</td>
      </tr>
      <tr>
        <td>row 6 cell 1</td>
        <td>row 6 cell 2</td>
      </tr>
      <tr>
        <td>row 7 cell 1</td>
        <td>row 7 cell 2</td>
      </tr>
      <tr>
        <td>row 8 cell 1</td>
        <td>row 8 cell 2</td>
      </tr>
      <tr>
        <td>row 9 cell 1</td>
        <td>row 9 cell 2</td>
      </tr>
      <tr>
        <td>row 10 cell 1</td>
        <td>row 10 cell 2</td>
      </tr>
      <tr>
        <td>row 11 cell 1</td>
        <td>row 11 cell 2</td>
      </tr>
      <tr>
        <td>row 12 cell 1</td>
        <td>row 12 cell 2</td>
      </tr>
      <tr>
        <td>row 13 cell 1</td>
        <td>row 13 cell 2</td>
      </tr>
      <tr>
        <td>row 14 cell 1</td>
        <td>row 14 cell 2</td>
      </tr>
      <tr>
        <td>row 15 cell 1</td>
        <td>row 15 cell 2</td>
      </tr>
      <tr>
        <td>row 16 cell 1</td>
        <td>row 16 cell 2</td>
      </tr>
      <tr>
        <td>row 17 cell 1</td>
        <td>row 17 cell 2</td>
      </tr>
      <tr>
        <td>row 18 cell 1</td>
        <td>row 18 cell 2</td>
      </tr>
      <tr>
        <td>row 19 cell 1</td>
        <td>row 19 cell 2</td>
      </tr>
      <tr>
        <td>row 20 cell 1</td>
        <td>row 20 cell 2</td>
      </tr>
      <tr>
        <td>row 21 cell 1</td>
        <td>row 21 cell 2</td>
      </tr>
      <tr>
        <td>row 22 cell 1</td>
        <td>row 22 cell 2</td>
      </tr>
      <tr>
        <td>row 23 cell 1</td>
        <td>row 23 cell 2</td>
      </tr>
      <tr>
        <td>row 24 cell 1</td>
        <td>row 24 cell 2</td>
      </tr>
      <tr>
        <td>row 25 cell 1</td>
        <td>row 25 cell 2</td>
      </tr>
      <tr>
        <td>row 26 cell 1</td>
        <td>row 26 cell 2</td>
      </tr>
      <tr>
        <td>row 27 cell 1</td>
        <td>row 27 cell 2</td>
      </tr>
      <tr>
        <td>row 28 cell 1</td>
        <td>row 28 cell 2</td>
      </tr>
      <tr>
        <td>row 29 cell 1</td>
        <td>row 29 cell 2</td>
      </tr>
      <tr>
        <td>row 30 cell 1</td>
        <td>row 30 cell 2</td>
      </tr>
      <tr>
        <td>row 31 cell 1</td>
        <td>row 31 cell 2</td>
      </tr>
      <tr>
        <td>row 32 cell 1</td>
        <td>row 32 cell 2</td>
      </tr>
      <tr>
        <td>row 33 cell 1</td>
        <td>row 33 cell 2</td>
      </tr>
      <tr>
        <td>row 34 cell 1</td>
        <td>row 34 cell 2</td>
      </tr>
      <tr>
        <td>row 35 cell 1</td>
        <td>row 35 cell 2</td>
      </tr>
      <tr>
        <td>row 36 cell 1</td>
        <td>row 36 cell 2</td>
      </tr>
      <tr>
        <td>row 37 cell 1</td>
        <td>row 37 cell 2</td>
      </tr>
      <tr>
        <td>row 38 cell 1</td>
        <td>row 38 cell 2</td>
      </tr>
      <tr>
        <td>row 39 cell 1</td>
        <td>row 39 cell 2</td>
      </tr>
      <tr>
        <td>row 40 cell 1</td>
        <td>row 40 cell 2</td>
      </tr>
      <tr>
        <td>row 41 cell 1</td>
        <td>row 41 cell 2</td>
      </tr>
      <tr>
        <td>row 42 cell 1</td>
        <td>row 42 cell 2</td>
      </tr>
      <tr>
        <td>row 43 cell 1</td>
        <td>row 43 cell 2</td>
      </tr>
      <tr>
        <td>row 44 cell 1</td>
        <td>row 44 cell 2</td>
      </tr>
      <tr>
        <td>row 45 cell 1</td>
        <td>row 45 cell 2</td>
      </tr>
      <tr>
        <td>row 46 cell 1</td>
        <td>row 46 cell 2</td>
      </tr>
    </table>
  </div>
</body>

Upvotes: 3

T J
T J

Reputation: 43156

If you absolutely want the scroll for entire page and not just for the header as in the question -

you can use the new clip-path property with a little bit of script for modifying the clipping value when user scrolls, as shown below.

$(window).on('scroll', function() {
  var scrolltop = $(this).scrollTop();
  $('.clip-me').css({
    '-webkit-clip-path': 'inset(' + (scrolltop) + 'px 0 0 0)',
    'clip-path': 'inset(' + (scrolltop) + 'px 0 0 0)',
    'clip': 'rect(' + (scrolltop) + 'px, auto, auto, auto)'
  });
});
html {
  background: url(http://oi65.tinypic.com/29dhf6g.jpg) no-repeat center center fixed;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}
* {
  margin: 0;
  padding: 0;
}
html,
body {
  height: 100%;
}
#background {
  position: fixed;
  top: 0;
  left: 0;
  z-index: -10;
  width: 100%;
  height: 100%;
}
#tableBackground {
  position: fixed;
  width: 90%;
  height: 100%;
  max-width: 1200px;
  margin: 0 auto;
  background: rgba(255, 255, 255, 0.8);
  left: 0;
  right: 0;
  z-index: 0;
}
#fixedHeader {
  position: fixed;
  left: 50%;
  top: 0;
  margin-left: -600px;
  width: 1200px;
  height: 80px;
  z-index: 10;
}
#tableContainer {
  position: absolute; /*-The fallback clip proerty requires absolute of fixed-*/
  top: 80px;
  width: 100%; /*---------- Modified for demo purpose ------------*/
  margin: 0 auto;
}
.stocks {
  margin: 20px auto;
}
h1 {
  font-size: 1.4em;
  text-align: center;
}
h2 {
  font-size: 1.2em;
  text-align: center;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="background"></div>
<div id="tableBackground"></div>
<div id="fixedHeader">
  <h1>fixed header</h1>
  <h2>Subheading</h2>
</div>
<div id="tableContainer" class="clip-me">
  <table class="stocks compact display cell-border">
    <tr>
      <td>row 1 cell 1</td>
      <td>row 1 cell 2</td>
    </tr>
    <tr>
      <td>row 2 cell 1</td>
      <td>row 2 cell 2</td>
    </tr>
    <tr>
      <td>row 3 cell 1</td>
      <td>row 3 cell 2</td>
    </tr>
    <tr>
      <td>row 4 cell 1</td>
      <td>row 4 cell 2</td>
    </tr>
    <tr>
      <td>row 5 cell 1</td>
      <td>row 5 cell 2</td>
    </tr>
    <tr>
      <td>row 6 cell 1</td>
      <td>row 6 cell 2</td>
    </tr>
    <tr>
      <td>row 7 cell 1</td>
      <td>row 7 cell 2</td>
    </tr>
    <tr>
      <td>row 8 cell 1</td>
      <td>row 8 cell 2</td>
    </tr>
    <tr>
      <td>row 9 cell 1</td>
      <td>row 9 cell 2</td>
    </tr>
    <tr>
      <td>row 10 cell 1</td>
      <td>row 10 cell 2</td>
    </tr>
    <tr>
      <td>row 11 cell 1</td>
      <td>row 11 cell 2</td>
    </tr>
    <tr>
      <td>row 12 cell 1</td>
      <td>row 12 cell 2</td>
    </tr>
    <tr>
      <td>row 13 cell 1</td>
      <td>row 13 cell 2</td>
    </tr>
    <tr>
      <td>row 14 cell 1</td>
      <td>row 14 cell 2</td>
    </tr>
    <tr>
      <td>row 15 cell 1</td>
      <td>row 15 cell 2</td>
    </tr>
    <tr>
      <td>row 16 cell 1</td>
      <td>row 16 cell 2</td>
    </tr>
    <tr>
      <td>row 17 cell 1</td>
      <td>row 17 cell 2</td>
    </tr>
    <tr>
      <td>row 18 cell 1</td>
      <td>row 18 cell 2</td>
    </tr>
    <tr>
      <td>row 19 cell 1</td>
      <td>row 19 cell 2</td>
    </tr>
    <tr>
      <td>row 20 cell 1</td>
      <td>row 20 cell 2</td>
    </tr>
    <tr>
      <td>row 21 cell 1</td>
      <td>row 21 cell 2</td>
    </tr>
    <tr>
      <td>row 22 cell 1</td>
      <td>row 22 cell 2</td>
    </tr>
    <tr>
      <td>row 23 cell 1</td>
      <td>row 23 cell 2</td>
    </tr>
    <tr>
      <td>row 24 cell 1</td>
      <td>row 24 cell 2</td>
    </tr>
    <tr>
      <td>row 25 cell 1</td>
      <td>row 25 cell 2</td>
    </tr>
    <tr>
      <td>row 26 cell 1</td>
      <td>row 26 cell 2</td>
    </tr>
    <tr>
      <td>row 27 cell 1</td>
      <td>row 27 cell 2</td>
    </tr>
    <tr>
      <td>row 28 cell 1</td>
      <td>row 28 cell 2</td>
    </tr>
    <tr>
      <td>row 29 cell 1</td>
      <td>row 29 cell 2</td>
    </tr>
    <tr>
      <td>row 30 cell 1</td>
      <td>row 30 cell 2</td>
    </tr>
    <tr>
      <td>row 31 cell 1</td>
      <td>row 31 cell 2</td>
    </tr>
    <tr>
      <td>row 32 cell 1</td>
      <td>row 32 cell 2</td>
    </tr>
    <tr>
      <td>row 33 cell 1</td>
      <td>row 33 cell 2</td>
    </tr>
    <tr>
      <td>row 34 cell 1</td>
      <td>row 34 cell 2</td>
    </tr>
    <tr>
      <td>row 35 cell 1</td>
      <td>row 35 cell 2</td>
    </tr>
    <tr>
      <td>row 36 cell 1</td>
      <td>row 36 cell 2</td>
    </tr>
    <tr>
      <td>row 37 cell 1</td>
      <td>row 37 cell 2</td>
    </tr>
    <tr>
      <td>row 38 cell 1</td>
      <td>row 38 cell 2</td>
    </tr>
    <tr>
      <td>row 39 cell 1</td>
      <td>row 39 cell 2</td>
    </tr>
    <tr>
      <td>row 40 cell 1</td>
      <td>row 40 cell 2</td>
    </tr>
    <tr>
      <td>row 41 cell 1</td>
      <td>row 41 cell 2</td>
    </tr>
    <tr>
      <td>row 42 cell 1</td>
      <td>row 42 cell 2</td>
    </tr>
    <tr>
      <td>row 43 cell 1</td>
      <td>row 43 cell 2</td>
    </tr>
    <tr>
      <td>row 44 cell 1</td>
      <td>row 44 cell 2</td>
    </tr>
    <tr>
      <td>row 45 cell 1</td>
      <td>row 45 cell 2</td>
    </tr>
    <tr>
      <td>row 46 cell 1</td>
      <td>row 46 cell 2</td>
    </tr>
  </table>
</div>

Note:

  • clip-path is relatively new, so you'll need to add browser prefixes and fall back to clip property, which is now deprecated (but has great Browser Compatibility) in favor of clip-path.

  • clip property requires the element to be either absolute or fixed positioned

side note: I've only tested this with latest versions of and . The table width is set to 100% only for demo purpose - so that it can be viewed easily in the snippet without horizontal scroll.

Upvotes: 3

Rajesh
Rajesh

Reputation: 24915

You can encapsulate content in a div with a fixed height and overflow:auto. Idea is to have a scroll of div and not of page.

Updated Fiddle. Note: Kindly check on Fiddle as window size may cause issues

Code

html { 
  background: url(http://oi65.tinypic.com/29dhf6g.jpg) no-repeat center center fixed; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

.content{
  margin-top:100px;
  height:200px; 
  border:2px solid gray;
  overflow:auto;
}

html,body{
  margin: 0;
  padding: 0;
}

#background {
	position: fixed;
    top: 0;
    left: 0;
    z-index: -10;
    width: 100%;
    height: 100%;
}

#tableBackground {
	position: fixed;
	width: 90%;
	height: 100%;
	max-width: 1200px;
	margin: 0 auto;
	background: rgba(255, 255, 255, 0.8);
	left: 0;
	right: 0;
	z-index: 0;
  overflow:auto;
}

#fixedHeader {
	position: fixed;
	left: 50%;
    top: 0;
    margin-left:-600px;
    width: 1200px;
    height: 80px;
	z-index: 10;
}

#tableContainer {
	position: relative;
	top: 80px;
	width: 1200px;
	margin: 0 auto;
}

.stocks {
	margin: 20px auto;
}

h1 {
	font-size: 1.4em;
	text-align: center;
}

h2 {
	font-size: 1.2em;
	text-align: center;
}
<body>
  <div id="background"></div>
  <div id="tableBackground"></div>
  <div id="fixedHeader">
    <h1>fixed header</h1>
    <h2>Subheading</h2>
  </div>
  <div class="content">
    <div id="tableContainer">
      <table class="stocks compact display cell-border">
        <tr>
          <td>row 1 cell 1</td>
          <td>row 1 cell 2</td>
        </tr>
        <tr>
          <td>row 2 cell 1</td>
          <td>row 2 cell 2</td>
        </tr>
        <tr>
          <td>row 3 cell 1</td>
          <td>row 3 cell 2</td>
        </tr>
        <tr>
          <td>row 4 cell 1</td>
          <td>row 4 cell 2</td>
        </tr>
        <tr>
          <td>row 5 cell 1</td>
          <td>row 5 cell 2</td>
        </tr>
        <tr>
          <td>row 6 cell 1</td>
          <td>row 6 cell 2</td>
        </tr>
        <tr>
          <td>row 7 cell 1</td>
          <td>row 7 cell 2</td>
        </tr>
        <tr>
          <td>row 8 cell 1</td>
          <td>row 8 cell 2</td>
        </tr>
        <tr>
          <td>row 9 cell 1</td>
          <td>row 9 cell 2</td>
        </tr>
        <tr>
          <td>row 10 cell 1</td>
          <td>row 10 cell 2</td>
        </tr>
        <tr>
          <td>row 11 cell 1</td>
          <td>row 11 cell 2</td>
        </tr>
        <tr>
          <td>row 12 cell 1</td>
          <td>row 12 cell 2</td>
        </tr>
        <tr>
          <td>row 13 cell 1</td>
          <td>row 13 cell 2</td>
        </tr>
        <tr>
          <td>row 14 cell 1</td>
          <td>row 14 cell 2</td>
        </tr>
        <tr>
          <td>row 15 cell 1</td>
          <td>row 15 cell 2</td>
        </tr>
        <tr>
          <td>row 16 cell 1</td>
          <td>row 16 cell 2</td>
        </tr>
        <tr>
          <td>row 17 cell 1</td>
          <td>row 17 cell 2</td>
        </tr>
        <tr>
          <td>row 18 cell 1</td>
          <td>row 18 cell 2</td>
        </tr>
        <tr>
          <td>row 19 cell 1</td>
          <td>row 19 cell 2</td>
        </tr>
        <tr>
          <td>row 20 cell 1</td>
          <td>row 20 cell 2</td>
        </tr>
        <tr>
          <td>row 21 cell 1</td>
          <td>row 21 cell 2</td>
        </tr>
        <tr>
          <td>row 22 cell 1</td>
          <td>row 22 cell 2</td>
        </tr>
        <tr>
          <td>row 23 cell 1</td>
          <td>row 23 cell 2</td>
        </tr>
        <tr>
          <td>row 24 cell 1</td>
          <td>row 24 cell 2</td>
        </tr>
        <tr>
          <td>row 25 cell 1</td>
          <td>row 25 cell 2</td>
        </tr>
        <tr>
          <td>row 26 cell 1</td>
          <td>row 26 cell 2</td>
        </tr>
        <tr>
          <td>row 27 cell 1</td>
          <td>row 27 cell 2</td>
        </tr>
        <tr>
          <td>row 28 cell 1</td>
          <td>row 28 cell 2</td>
        </tr>
        <tr>
          <td>row 29 cell 1</td>
          <td>row 29 cell 2</td>
        </tr>
        <tr>
          <td>row 30 cell 1</td>
          <td>row 30 cell 2</td>
        </tr>
        <tr>
          <td>row 31 cell 1</td>
          <td>row 31 cell 2</td>
        </tr>
        <tr>
          <td>row 32 cell 1</td>
          <td>row 32 cell 2</td>
        </tr>
        <tr>
          <td>row 33 cell 1</td>
          <td>row 33 cell 2</td>
        </tr>
        <tr>
          <td>row 34 cell 1</td>
          <td>row 34 cell 2</td>
        </tr>
        <tr>
          <td>row 35 cell 1</td>
          <td>row 35 cell 2</td>
        </tr>
        <tr>
          <td>row 36 cell 1</td>
          <td>row 36 cell 2</td>
        </tr>
        <tr>
          <td>row 37 cell 1</td>
          <td>row 37 cell 2</td>
        </tr>
        <tr>
          <td>row 38 cell 1</td>
          <td>row 38 cell 2</td>
        </tr>
        <tr>
          <td>row 39 cell 1</td>
          <td>row 39 cell 2</td>
        </tr>
        <tr>
          <td>row 40 cell 1</td>
          <td>row 40 cell 2</td>
        </tr>
        <tr>
          <td>row 41 cell 1</td>
          <td>row 41 cell 2</td>
        </tr>
        <tr>
          <td>row 42 cell 1</td>
          <td>row 42 cell 2</td>
        </tr>
        <tr>
          <td>row 43 cell 1</td>
          <td>row 43 cell 2</td>
        </tr>
        <tr>
          <td>row 44 cell 1</td>
          <td>row 44 cell 2</td>
        </tr>
        <tr>
          <td>row 45 cell 1</td>
          <td>row 45 cell 2</td>
        </tr>
        <tr>
          <td>row 46 cell 1</td>
          <td>row 46 cell 2</td>
        </tr>
      </table>
    </div>
  </div>
</body>

Upvotes: 0

Vijay Potta
Vijay Potta

Reputation: 27

#tableContainer {
    height: 80%;
    margin: 0 auto;
    overflow: auto;
    position: fixed;
    top: 80px;
    width: 100%;
}

Update #tableContainer CSS with above attributes. As header is fixed and it always displays on top. content exceeds the page so browser scrolls the content behind header. we have to give height and overflow attributes to table container to overcome such issues.

Upvotes: 0

Related Questions