Fixed table header with horizontal scroll

Navigation
0

I have a table in which I need to put a fixed header when it moves down, because there is so much data to show. The problem is that I have many columns to display, and these columns span more than the width of the screen.

I have already searched for many ways to do what I'm looking for, I try to do it with Jquery , but if you lower it a little, the header goes crazy, and when it goes down the header is kept, but the columns of the header no longer match with the content columns, and I did not manage to make the header move according to the horizontal scroll.

In this link I have an example of what I "managed" to do for now: 

var stickyOffset = $('.sticky').offset().top;

$(window).scroll(function() {
  var sticky = $('.sticky'), 
      scroll = $(window).scrollTop();

  if (scroll >= stickyOffset) sticky.addClass('fixed');
  else sticky.removeClass('fixed');
});
.fixed {
  position: fixed;
  top: 0;
  left: 40;
}

body {
  padding: 0 20px;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 11px;
}

table {
  border-width: 1;
  border-style: solid;
  padding: 0;
  margin: 0 0 200px 0;
  border-collapse: collapse;
}

th {
  padding: 5px;
  /*NOTE: th padding must be set explicitly in order to support IE*/
  text-align: right;
  font-weight: bold;
  line-height: 2em;
  color: #FFF;
  background-color: #b1b1b1;
}

tbody td {
  padding: 10px;
  line-height: 18px;
  border-top: 1px solid #E0E0E0;
}

tbody tr:nth-child(2n) {
  background-color: #F7F7F7;
}

tbody tr:hover {
  background-color: #EEEEEE;
}

td {
  text-align: right;
}

td:first-child,
th:first-child {
  text-align: left;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<html>
  <body>
    <p>Contenido</p>
    <p>Contenido</p>
    <p>Contenido</p>
    <p>Contenido</p>
    <p>Contenido</p>
    <p>Contenido</p>
  </body>
  <table border="1">
    <tr class="sticky">
      <th>Id</th>
      <th>Cliente</th>
      <th>Descripcion</th>
      <th>Notas</th>
      <th>Fecha de llegada</th>
      <th>Fecha ejecucion</th>
      <th>Usuario</th>
      <th>Informacion</th>
      <th>Informacion</th>
      <th>Informacion</th>
      <th>Informacion</th>
      <th>Informacion</th>
      <th>Informacion</th>
      <th>Informacion</th>
    </tr>
    <tr>
      <td>Datos</td>
      <td>Datos</td>
      <td>Datos</td>
      <td>Datos</td>
      <td>Datos</td>
      <td>Datos</td>
      <td>Datos</td>
      <td>Datos</td>
      <td>Datos</td>
      <td>Datos</td>
      <td>Datos</td>
      <td>Datos</td>
      <td>Datos</td>
      <td>Datos</td>
    </tr>
    <tr>
      <td>Datos</td>
      <td>Datos</td>
      <td>Datos</td>
      <td>Datos</td>
      <td>Datos</td>
      <td>Datos</td>
      <td>Datos</td>
      <td>Datos</td>
      <td>Datos</td>
      <td>Datos</td>
      <td>Datos</td>
      <td>Datos</td>
      <td>Datos</td>
      <td>Datos</td>
    </tr>
    <tr>
      <td>Datos</td>
      <td>Datos</td>
      <td>Datos</td>
      <td>Datos</td>
      <td>Datos</td>
      <td>Datos</td>
      <td>Datos</td>
      <td>Datos</td>
      <td>Datos</td>
      <td>Datos</td>
      <td>Datos</td>
      <td>Datos</td>
      <td>Datos</td>
      <td>Datos</td>
    </tr>
    <tr>
      <td>Datos</td>
      <td>Datos</td>
      <td>Datos</td>
      <td>Datos</td>
      <td>Datos</td>
      <td>Datos</td>
      <td>Datos</td>
      <td>Datos</td>
      <td>Datos</td>
      <td>Datos</td>
      <td>Datos</td>
      <td>Datos</td>
      <td>Datos</td>
      <td>Datos</td>
    </tr>
    <tr>
      <td>Datos</td>
      <td>Datos</td>
      <td>Datos</td>
      <td>Datos</td>
      <td>Datos</td>
      <td>Datos</td>
      <td>Datos</td>
      <td>Datos</td>
      <td>Datos</td>
      <td>Datos</td>
      <td>Datos</td>
      <td>Datos</td>
      <td>Datos</td>
      <td>Datos</td>
    </tr>
    <tr>
      <td>Datos</td>
      <td>Datos</td>
      <td>Datos</td>
      <td>Datos</td>
      <td>Datos</td>
      <td>Datos</td>
      <td>Datos</td>
      <td>Datos</td>
      <td>Datos</td>
      <td>Datos</td>
      <td>Datos</td>
      <td>Datos</td>
      <td>Datos</td>
      <td>Datos</td>
    </tr>
    <tr>
      <td>Datos</td>
      <td>Datos</td>
      <td>Datos</td>
      <td>Datos</td>
      <td>Datos</td>
      <td>Datos</td>
      <td>Datos</td>
      <td>Datos</td>
      <td>Datos</td>
      <td>Datos</td>
      <td>Datos</td>
      <td>Datos</td>
      <td>Datos</td>
      <td>Datos</td>
    </tr>
  </table>
</html>
    
asked by Raúl Alvarez 19.05.2018 в 05:25
source

1 answer

0

Hello fellow, try to do like this example, I think it's what you're looking for:

the header that you do not want to move: 

<div class="header" id="myHeader">
  <h2>My Header</h2>
</div>

this would be the css: 

/* Style the header */
.header {
  padding: 10px 16px;
  background: #555;
  color: #f1f1f1;
}

/* Page content */
.content {
  padding: 16px;
}

/* The sticky class is added to the header with JS when it reaches its scroll position */
.sticky {
  position: fixed;
  top: 0;
  width: 100%
}

/* Add some top padding to the page content to prevent sudden quick movement (as the header gets a new position at the top of the page (position:fixed and top:0) */
.sticky + .content {
  padding-top: 102px;
}

And this would be the javascript to give it the functionality: 

// When the user scrolls the page, execute myFunction 
window.onscroll = function() {myFunction()};

// Get the header
var header = document.getElementById("myHeader");

// Get the offset position of the navbar
var sticky = header.offsetTop;

// Add the sticky class to the header when you reach its scroll position. Remove "sticky" when you leave the scroll position
function myFunction() {
  if (window.pageYOffset >= sticky) {
    header.classList.add("sticky");
  } else {
    header.classList.remove("sticky");
  }
}

I hope it serves you! greetings

    
answered by 19.05.2018 в 11:53
javascript scrolltop How to correctly post a WS SOAP with Ajax?