Make Fixed Header Scroll Horizontal

Make Fixed Header Scroll Horizontal

As it seems to me, pure CSS can't solve this issue.
But adding a few lines of JQuery may help:

<script type="text/javascript">
    $(window).scroll(function() {
        $('#div_menu').css('top', $(this).scrollTop() + "px");
    });
</script>

CSS position of #div_menu should be changed to absolute.

UPD:
In pure JS it would be:

<script type="text/javascript">
    var div_menu = document.getElementById('div_menu'); 
    window.onscroll = function (e) {  
        if (div_menu)
            div_menu.style.top = window.pageYOffset + 'px';
    }  
</script>

table with sticky header and horizontal scroll

As per the MDN documentation:

a sticky element "sticks" to its nearest ancestor that has a "scrolling mechanism" (created when overflow is hidden, scroll, auto, or overlay), even if that ancestor isn't the nearest actually scrolling ancestor.

There's an active GitHub issue discussing this on the W3C repo, which has been running since 2017. There have been various workarounds suggested, but they all seem to rely on adding a fixed height to the table / table container, or using Javascript as in this answer.

At least for the moment, this is not something that's supported natively.

Fixed table header with horizontal AND vertical scrolling body

You are cloning the table for fix header, better you can direct fix the header of original table which will results the same.

Element with position:fixed changes the width with respect to viewport, which results width gets change on scrolling as you can check here https://jsfiddle.net/chourasiapawankumar/vg7q3tyc/19

Approach:1

instead of position:fixed use relative in th and it is working with your parent div which has min-height:100px.

https://jsfiddle.net/chourasiapawankumar/krw0qpbL/62/

Approach:2

You can see both horizontal and vertical scroll bar at a time on removing min-height of parent div which I have commented in the below fiddle.

https://jsfiddle.net/chourasiapawankumar/vg7q3tyc/33/

Horizontal scrollbar on table with sticky header

i have fixed this issue by providing the container a fixed max height, that way it will have the sticky header and scrolling as well.

.table-flow {
  max-height: 555px;
  overflow-x: scroll;
  max-width: auto;
  position: relative;
}

Keeping the horizontal scroll position of a fixed header in sync with the body

Pretty simple with:

<th>'s style set to sticky,

top: 0 to stick to top, and

background-color: white to "hide" scrolled rows.

nowrap used for horizontal effect (not necessary).

th {
  position: sticky;
  top: 0;
  background-color: white;
}
<table border="1">
  <tr>
    <th>sticky blah blah blah sticky </th>
    <th>sticky blah blah blah sticky </th>
    <th>sticky blah blah blah sticky </th>
    <th>sticky blah blah blah sticky </th>
    <th>sticky blah blah blah sticky </th>
    <th>sticky blah blah blah sticky </th>
    <th>sticky blah blah blah sticky </th>
    <th>sticky blah blah blah sticky </th>
    <th>sticky blah blah blah sticky </th>
  </tr>
  <tr>
    <td nowrap>normal blah blah blah normal 01</td>
    <td nowrap>normal blah blah blah normal </td>
    <td nowrap>normal blah blah blah normal </td>
    <td nowrap>normal blah blah blah normal </td>
    <td nowrap>normal blah blah blah normal </td>
    <td nowrap>normal blah blah blah normal </td>
    <td nowrap>normal blah blah blah normal </td>
    <td nowrap>normal blah blah blah normal </td>
    <td nowrap>normal blah blah blah normal </td>
  </tr>
  <tr>
    <td>normal blah blah blah normal 02</td>
    <td>normal blah blah blah normal </td>
    <td>normal blah blah blah normal </td>
    <td>normal blah blah blah normal </td>
    <td>normal blah blah blah normal </td>
    <td>normal blah blah blah normal </td>
    <td>normal blah blah blah normal </td>
    <td>normal blah blah blah normal </td>
    <td>normal blah blah blah normal </td>
  </tr>
  <tr>
    <td>normal blah blah blah normal 03</td>
    <td>normal blah blah blah normal </td>
    <td>normal blah blah blah normal </td>
    <td>normal blah blah blah normal </td>
    <td>normal blah blah blah normal </td>
    <td>normal blah blah blah normal </td>
    <td>normal blah blah blah normal </td>
    <td>normal blah blah blah normal </td>
    <td>normal blah blah blah normal </td>
  </tr>
  <tr>
    <td>normal blah blah blah normal 04</td>
    <td>normal blah blah blah normal </td>
    <td>normal blah blah blah normal </td>
    <td>normal blah blah blah normal </td>
    <td>normal blah blah blah normal </td>
    <td>normal blah blah blah normal </td>
    <td>normal blah blah blah normal </td>
    <td>normal blah blah blah normal </td>
    <td>normal blah blah blah normal </td>
  </tr>
  <tr>
    <td>normal blah blah blah normal 05</td>
    <td>normal blah blah blah normal </td>
    <td>normal blah blah blah normal </td>
    <td>normal blah blah blah normal </td>
    <td>normal blah blah blah normal </td>
    <td>normal blah blah blah normal </td>
    <td>normal blah blah blah normal </td>
    <td>normal blah blah blah normal </td>
    <td>normal blah blah blah normal </td>
  </tr>
  <tr>
    <td>normal blah blah blah normal 06</td>
    <td>normal blah blah blah normal </td>
    <td>normal blah blah blah normal </td>
    <td>normal blah blah blah normal </td>
    <td>normal blah blah blah normal </td>
    <td>normal blah blah blah normal </td>
    <td>normal blah blah blah normal </td>
    <td>normal blah blah blah normal </td>
    <td>normal blah blah blah normal </td>
  </tr>
  <tr>
    <td>normal blah blah blah normal 07</td>
    <td>normal blah blah blah normal </td>
    <td>normal blah blah blah normal </td>
    <td>normal blah blah blah normal </td>
    <td>normal blah blah blah normal </td>
    <td>normal blah blah blah normal </td>
    <td>normal blah blah blah normal </td>
    <td>normal blah blah blah normal </td>
    <td>normal blah blah blah normal </td>
  </tr>
  <tr>
    <td>normal blah blah blah normal 08</td>
    <td>normal blah blah blah normal </td>
    <td>normal blah blah blah normal </td>
    <td>normal blah blah blah normal </td>
    <td>normal blah blah blah normal </td>
    <td>normal blah blah blah normal </td>
    <td>normal blah blah blah normal </td>
    <td>normal blah blah blah normal </td>
    <td>normal blah blah blah normal </td>
  </tr>
  <tr>
    <td>normal blah blah blah normal 09</td>
    <td>normal blah blah blah normal </td>
    <td>normal blah blah blah normal </td>
    <td>normal blah blah blah normal </td>
    <td>normal blah blah blah normal </td>
    <td>normal blah blah blah normal </td>
    <td>normal blah blah blah normal </td>
    <td>normal blah blah blah normal </td>
    <td>normal blah blah blah normal </td>
  </tr>
  <tr>
    <td>normal blah blah blah normal 10</td>
    <td>normal blah blah blah normal </td>
    <td>normal blah blah blah normal </td>
    <td>normal blah blah blah normal </td>
    <td>normal blah blah blah normal </td>
    <td>normal blah blah blah normal </td>
    <td>normal blah blah blah normal </td>
    <td>normal blah blah blah normal </td>
    <td>normal blah blah blah normal </td>
  </tr>
  <tr>
    <td>normal blah blah blah normal 11</td>
    <td>normal blah blah blah normal </td>
    <td>normal blah blah blah normal </td>
    <td>normal blah blah blah normal </td>
    <td>normal blah blah blah normal </td>
    <td>normal blah blah blah normal </td>
    <td>normal blah blah blah normal </td>
    <td>normal blah blah blah normal </td>
    <td>normal blah blah blah normal </td>
  </tr>
  <tr>
    <td>normal blah blah blah normal 12</td>
    <td>normal blah blah blah normal </td>
    <td>normal blah blah blah normal </td>
    <td>normal blah blah blah normal </td>
    <td>normal blah blah blah normal </td>
    <td>normal blah blah blah normal </td>
    <td>normal blah blah blah normal </td>
    <td>normal blah blah blah normal </td>
    <td>normal blah blah blah normal </td>
  </tr>
  <tr>
    <td>normal blah blah blah normal 13</td>
    <td>normal blah blah blah normal </td>
    <td>normal blah blah blah normal </td>
    <td>normal blah blah blah normal </td>
    <td>normal blah blah blah normal </td>
    <td>normal blah blah blah normal </td>
    <td>normal blah blah blah normal </td>
    <td>normal blah blah blah normal </td>
    <td>normal blah blah blah normal </td>
  </tr>
  <tr>
    <td>normal blah blah blah normal 14</td>
    <td>normal blah blah blah normal </td>
    <td>normal blah blah blah normal </td>
    <td>normal blah blah blah normal </td>
    <td>normal blah blah blah normal </td>
    <td>normal blah blah blah normal </td>
    <td>normal blah blah blah normal </td>
    <td>normal blah blah blah normal </td>
    <td>normal blah blah blah normal </td>
  </tr>
  <tr>
    <td>normal blah blah blah normal 15</td>
    <td>normal blah blah blah normal </td>
    <td>normal blah blah blah normal </td>
    <td>normal blah blah blah normal </td>
    <td>normal blah blah blah normal </td>
    <td>normal blah blah blah normal </td>
    <td>normal blah blah blah normal </td>
    <td>normal blah blah blah normal </td>
    <td>normal blah blah blah normal </td>
  </tr>
  <tr>
    <td>normal blah blah blah normal 16</td>
    <td>normal blah blah blah normal </td>
    <td>normal blah blah blah normal </td>
    <td>normal blah blah blah normal </td>
    <td>normal blah blah blah normal </td>
    <td>normal blah blah blah normal </td>
    <td>normal blah blah blah normal </td>
    <td>normal blah blah blah normal </td>
    <td>normal blah blah blah normal </td>
  </tr>
  <tr>
    <td>normal blah blah blah normal 17</td>
    <td>normal blah blah blah normal </td>
    <td>normal blah blah blah normal </td>
    <td>normal blah blah blah normal </td>
    <td>normal blah blah blah normal </td>
    <td>normal blah blah blah normal </td>
    <td>normal blah blah blah normal </td>
    <td>normal blah blah blah normal </td>
    <td>normal blah blah blah normal </td>
  </tr>
  <tr>
    <td>normal blah blah blah normal 18</td>
    <td>normal blah blah blah normal </td>
    <td>normal blah blah blah normal </td>
    <td>normal blah blah blah normal </td>
    <td>normal blah blah blah normal </td>
    <td>normal blah blah blah normal </td>
    <td>normal blah blah blah normal </td>
    <td>normal blah blah blah normal </td>
    <td>normal blah blah blah normal </td>
  </tr>
  <tr>
    <td>normal blah blah blah normal 19</td>
    <td>normal blah blah blah normal </td>
    <td>normal blah blah blah normal </td>
    <td>normal blah blah blah normal </td>
    <td>normal blah blah blah normal </td>
    <td>normal blah blah blah normal </td>
    <td>normal blah blah blah normal </td>
    <td>normal blah blah blah normal </td>
    <td>normal blah blah blah normal </td>
  </tr>
  <tr>
    <td>normal blah blah blah normal 20</td>
    <td>normal blah blah blah normal </td>
    <td>normal blah blah blah normal </td>
    <td>normal blah blah blah normal </td>
    <td>normal blah blah blah normal </td>
    <td>normal blah blah blah normal </td>
    <td>normal blah blah blah normal </td>
    <td>normal blah blah blah normal </td>
    <td>normal blah blah blah normal </td>
  </tr>
  <tr>
    <td>normal blah blah blah normal 21</td>
    <td>normal blah blah blah normal </td>
    <td>normal blah blah blah normal </td>
    <td>normal blah blah blah normal </td>
    <td>normal blah blah blah normal </td>
    <td>normal blah blah blah normal </td>
    <td>normal blah blah blah normal </td>
    <td>normal blah blah blah normal </td>
    <td>normal blah blah blah normal </td>
  </tr>
  <tr>
    <td>normal blah blah blah normal 22</td>
    <td>normal blah blah blah normal </td>
    <td>normal blah blah blah normal </td>
    <td>normal blah blah blah normal </td>
    <td>normal blah blah blah normal </td>
    <td>normal blah blah blah normal </td>
    <td>normal blah blah blah normal </td>
    <td>normal blah blah blah normal </td>
    <td>normal blah blah blah normal </td>
  </tr>
  <tr>
    <td>normal blah blah blah normal 23</td>
    <td>normal blah blah blah normal </td>
    <td>normal blah blah blah normal </td>
    <td>normal blah blah blah normal </td>
    <td>normal blah blah blah normal </td>
    <td>normal blah blah blah normal </td>
    <td>normal blah blah blah normal </td>
    <td>normal blah blah blah normal </td>
    <td>normal blah blah blah normal </td>
  </tr>
  <tr>
    <td>normal blah blah blah normal 24</td>
    <td>normal blah blah blah normal </td>
    <td>normal blah blah blah normal </td>
    <td>normal blah blah blah normal </td>
    <td>normal blah blah blah normal </td>
    <td>normal blah blah blah normal </td>
    <td>normal blah blah blah normal </td>
    <td>normal blah blah blah normal </td>
    <td>normal blah blah blah normal </td>
  </tr>
  <tr>
    <td>normal blah blah blah normal 25</td>
    <td>normal blah blah blah normal </td>
    <td>normal blah blah blah normal </td>
    <td>normal blah blah blah normal </td>
    <td>normal blah blah blah normal </td>
    <td>normal blah blah blah normal </td>
    <td>normal blah blah blah normal </td>
    <td>normal blah blah blah normal </td>
    <td>normal blah blah blah normal </td>
  </tr>
  <tr>
    <td>normal blah blah blah normal 26</td>
    <td>normal blah blah blah normal </td>
    <td>normal blah blah blah normal </td>
    <td>normal blah blah blah normal </td>
    <td>normal blah blah blah normal </td>
    <td>normal blah blah blah normal </td>
    <td>normal blah blah blah normal </td>
    <td>normal blah blah blah normal </td>
    <td>normal blah blah blah normal </td>
  </tr>
  <tr>
    <td>normal blah blah blah normal 27</td>
    <td>normal blah blah blah normal </td>
    <td>normal blah blah blah normal </td>
    <td>normal blah blah blah normal </td>
    <td>normal blah blah blah normal </td>
    <td>normal blah blah blah normal </td>
    <td>normal blah blah blah normal </td>
    <td>normal blah blah blah normal </td>
    <td>normal blah blah blah normal </td>
  </tr>
  <tr>
    <td>normal blah blah blah normal 28</td>
    <td>normal blah blah blah normal </td>
    <td>normal blah blah blah normal </td>
    <td>normal blah blah blah normal </td>
    <td>normal blah blah blah normal </td>
    <td>normal blah blah blah normal </td>
    <td>normal blah blah blah normal </td>
    <td>normal blah blah blah normal </td>
    <td>normal blah blah blah normal </td>
  </tr>
  <tr>
    <td>normal blah blah blah normal 29</td>
    <td>normal blah blah blah normal </td>
    <td>normal blah blah blah normal </td>
    <td>normal blah blah blah normal </td>
    <td>normal blah blah blah normal </td>
    <td>normal blah blah blah normal </td>
    <td>normal blah blah blah normal </td>
    <td>normal blah blah blah normal </td>
    <td>normal blah blah blah normal </td>
  </tr>
  <tr>
    <td>normal blah blah blah normal 30</td>
    <td>normal blah blah blah normal </td>
    <td>normal blah blah blah normal </td>
    <td>normal blah blah blah normal </td>
    <td>normal blah blah blah normal </td>
    <td>normal blah blah blah normal </td>
    <td>normal blah blah blah normal </td>
    <td>normal blah blah blah normal </td>
    <td>normal blah blah blah normal </td>
  </tr>
  <tr>
    <td>normal blah blah blah normal 31</td>
    <td>normal blah blah blah normal </td>
    <td>normal blah blah blah normal </td>
    <td>normal blah blah blah normal </td>
    <td>normal blah blah blah normal </td>
    <td>normal blah blah blah normal </td>
    <td>normal blah blah blah normal </td>
    <td>normal blah blah blah normal </td>
    <td>normal blah blah blah normal </td>
  </tr>
  <tr>
    <td>normal blah blah blah normal 32</td>
    <td>normal blah blah blah normal </td>
    <td>normal blah blah blah normal </td>
    <td>normal blah blah blah normal </td>
    <td>normal blah blah blah normal </td>
    <td>normal blah blah blah normal </td>
    <td>normal blah blah blah normal </td>
    <td>normal blah blah blah normal </td>
    <td>normal blah blah blah normal </td>
  </tr>
  <tr>
    <td>normal blah blah blah normal 33</td>
    <td>normal blah blah blah normal </td>
    <td>normal blah blah blah normal </td>
    <td>normal blah blah blah normal </td>
    <td>normal blah blah blah normal </td>
    <td>normal blah blah blah normal </td>
    <td>normal blah blah blah normal </td>
    <td>normal blah blah blah normal </td>
    <td>normal blah blah blah normal </td>
  </tr>
  <tr>
    <td>normal blah blah blah normal 34</td>
    <td>normal blah blah blah normal </td>
    <td>normal blah blah blah normal </td>
    <td>normal blah blah blah normal </td>
    <td>normal blah blah blah normal </td>
    <td>normal blah blah blah normal </td>
    <td>normal blah blah blah normal </td>
    <td>normal blah blah blah normal </td>
    <td>normal blah blah blah normal </td>
  </tr>
  <tr>
    <td>normal blah blah blah normal 35</td>
    <td>normal blah blah blah normal </td>
    <td>normal blah blah blah normal </td>
    <td>normal blah blah blah normal </td>
    <td>normal blah blah blah normal </td>
    <td>normal blah blah blah normal </td>
    <td>normal blah blah blah normal </td>
    <td>normal blah blah blah normal </td>
    <td>normal blah blah blah normal </td>
  </tr>
  <tr>
    <td>normal blah blah blah normal 36</td>
    <td>normal blah blah blah normal </td>
    <td>normal blah blah blah normal </td>
    <td>normal blah blah blah normal </td>
    <td>normal blah blah blah normal </td>
    <td>normal blah blah blah normal </td>
    <td>normal blah blah blah normal </td>
    <td>normal blah blah blah normal </td>
    <td>normal blah blah blah normal </td>
  </tr>
  <tr>
    <td>normal blah blah blah normal 37</td>
    <td>normal blah blah blah normal </td>
    <td>normal blah blah blah normal </td>
    <td>normal blah blah blah normal </td>
    <td>normal blah blah blah normal </td>
    <td>normal blah blah blah normal </td>
    <td>normal blah blah blah normal </td>
    <td>normal blah blah blah normal </td>
    <td>normal blah blah blah normal </td>
  </tr>
  <tr>
    <td>normal blah blah blah normal 38</td>
    <td>normal blah blah blah normal </td>
    <td>normal blah blah blah normal </td>
    <td>normal blah blah blah normal </td>
    <td>normal blah blah blah normal </td>
    <td>normal blah blah blah normal </td>
    <td>normal blah blah blah normal </td>
    <td>normal blah blah blah normal </td>
    <td>normal blah blah blah normal </td>
  </tr>
  <tr>
    <td>normal blah blah blah normal 39</td>
    <td>normal blah blah blah normal </td>
    <td>normal blah blah blah normal </td>
    <td>normal blah blah blah normal </td>
    <td>normal blah blah blah normal </td>
    <td>normal blah blah blah normal </td>
    <td>normal blah blah blah normal </td>
    <td>normal blah blah blah normal </td>
    <td>normal blah blah blah normal </td>
  </tr>
  <tr>
    <td>normal blah blah blah normal 40</td>
    <td>normal blah blah blah normal </td>
    <td>normal blah blah blah normal </td>
    <td>normal blah blah blah normal </td>
    <td>normal blah blah blah normal </td>
    <td>normal blah blah blah normal </td>
    <td>normal blah blah blah normal </td>
    <td>normal blah blah blah normal </td>
    <td>normal blah blah blah normal </td>
  </tr>
</table>

A large table with horizontal scroll and sticky header

What I would like to do is at least have the background of header and footer extend all the way to the right.

You can do this by simply applying a display: grid declaration to the body element.

There's no room for the body element's child elements to share space horizontally, so those elements will be automatically flowed into a column in which they all share the same width.

body {  display: grid;}
header {  background: red;  padding: 20px;}
footer {  background: blue;  padding: 20px;}
table th {  position: sticky;  top: 0;}
<header>  <nav>Navigation and Header</nav></header><main>  <table>    <tr>      <th>Firstname</th>      <th>Lastname</th>      <th>Age</th>      <th>Firstname</th>      <th>Lastname</th>      <th>Age</th>      <th>Firstname</th>      <th>Lastname</th>      <th>Age</th>      <th>Firstname</th>      <th>Lastname</th>      <th>Age</th>      <th>Firstname</th>      <th>Lastname</th>      <th>Age</th>      <th>Firstname</th>      <th>Lastname</th>      <th>Age</th>      <th>Firstname</th>      <th>Lastname</th>      <th>Age</th>      <th>Firstname</th>      <th>Lastname</th>      <th>Age</th>      <th>Firstname</th>      <th>Lastname</th>      <th>Age</th>      <th>Firstname</th>      <th>Lastname</th>      <th>Age</th>

Related Topics

HTMLpurifier with Borderradius

How Automatically Adjust Div's Width Using CSS

How to Set Div Height to 100% of Chosen Print Paper

Is Position: Static Identical to Position: Relative, with No Other Properties Specified

Identify Browser and Os with CSS

Bootstrap Carousel Caption Top Alignment

How to Alternate The Number of Children Between Odd and Even Rows

How to Use CSS Rotate() in Th Table Tags

Internal Stylesheet Not Working in Ie9 with Jsf

Unwanted CSS Injected into Posts

How to Draw Lines Through Bootstrap Vertical Dividers

In CSS Use "Display:None" on The Element, But Keep Its ":After"

Style Ng-Bootstrap Accordion with CSS

CSS: Opacity Only Background, Not The Text Inside

How to Use a SASS $Variable Across Multiple Pages Using @Use

CSS Transition (Height Property) - Can't Get It to Roll from Bottom

Sass 3.2 Media Queries and Internet Explorer Support

Wrong Rendering of <Sup> in Table with Valign=Top in Chrome and Safari


Leave a reply



Submit