1

I have, into a global div, 2 divs one to display the header and the second to display the body. the scrolling is enabled but I want to make the header fixed just when I am scrolling vertically.

I used the position:sticky and it works only for firefox.

Can anyone help me.

CSS:

.wrapper{
    width: 400px;
    overflow: auto;
}

.headertable {
    background-color: white;
    min-width: 600px;
    top: 0;
    position: sticky;
}

.bodytable{
    min-width: 600px;
    height: 100px
}

table{
    width: 100%;
    border: 1px solid;
    text-align: center;
}

HTML : 

<div class="wrapper"> 
<div class="headertable" id="headerfixed">
    <table> 
        <tr><td>Head</td><td>Head</td><td>Head</td><td>Head</td><td>Head</td><td>Head</td><td>Head</td><td>Head</td><td>Head</td><td>Head</td></tr>
    </table>
</div>
<div class="bodytable"> 
    <table> 
        <tr><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td></tr>
        <tr><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td></tr>
        <tr><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td></tr>
        <tr><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td></tr>
        <tr><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td></tr>
        <tr><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td></tr>
        <tr><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td></tr>
        <tr><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td></tr>
        <tr><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td></tr>
        <tr><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td></tr>
        <tr><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td></tr>
        <tr><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td></tr>
    </table>
</div>

The Jsfiddle example : https://jsfiddle.net/v1acdk9p/

Bech_Med
  • 31
  • 3
  • This is harder than initially expected using just `html` and `css` but there is a solution of sorts here : http://stackoverflow.com/a/23859719/1606432 using `clip` but it's more of a workaround! :( – Pogrindis Feb 05 '16 at 14:22
  • It seems chrome removed support for `sticky` : Google (Chromium) removed support for position: sticky due to the unfinished nature of the spec, and they will focus on other scrolling features in the mean-time. – Pogrindis Feb 05 '16 at 14:28
  • Possible duplicate of [How to make fixed header table inside scrollable div?](http://stackoverflow.com/questions/17827908/how-to-make-fixed-header-table-inside-scrollable-div) – Sphinx Feb 05 '16 at 14:34
  • The issue is not about the table but rather the head which must be fixed and scroll with the same rule as the body. – Bech_Med Feb 05 '16 at 16:36

0 Answers0