scrolling table

scrolling table

by ordette

HTML

<div class="grid__wrapper">
    <div class="grid--entity">
        <div class="grid__header-group">
            <div class="grid__row">
                <div class="grid__cell grid__row-header is-stuck"></div>
                <div class="grid__cell"></div>
                <div class="grid__cell"></div>
                <div class="grid__cell"></div>
                <div class="grid__cell"></div>
                <div class="grid__cell"></div>
                <div class="grid__cell"></div>
                <div class="grid__cell"></div>
                <div class="grid__cell"></div>
                <div class="grid__cell"></div>
                <div class="grid__cell"></div>
                <div class="grid__cell"></div>
            </div>
            <div class="grid__row">
                <div class="grid__cell grid__row-header is-stuck"></div>
            </div>
            <div class="grid__row">
                <div class="grid__cell grid__row-header is-stuck"></div>
                <div class="grid__cell"></div>
                <div class="grid__cell"></div>
                <div class="grid__cell"></div>
                <div class="grid__cell"></div>
                <div class="grid__cell"></div>
                <div class="grid__cell"></div>
                <div class="grid__cell"></div>
                <div class="grid__cell"></div>
                <div class="grid__cell"></div>
                <div class="grid__cell"></div>
                <div class="grid__cell"></div>
            </div>
            <div class="grid__row">
                <div class="grid__cell grid__row-header is-stuck"></div>
            </div>
        </div>
        <!-- end grid header section -->
        <div class="grid__body">
            <div class="grid__row">
                <div class="grid__cell grid__row-header is-stuck">1</div>
                <div class="grid__cell semantic-group--start">
                  <p>first name</p>
                </div>
                <div...

CSS

body {
  margin: 5%;
}

.grid--entity {
  width: 100%;
  overflow: hidden;
  background-color: green;
  border: 2px solid pink;
  white-space: nowrap;
  z-index: 0;
}

.grid__row {
  float: left;
  display: flex;
  flex-direction: row;
  height: 50px;
  background-color: orange;
  border: 1px dotted blue;
  position: relative;
}
[class^="semantic-group"] {
  position: relative;
}

[class^="semantic-group"]:before {
  content: ' ';
  position: absolute;
  background-color: #efefef;
}

.semantic-group--start:before {
  content: ' ';
  position: absolute;
  width: 87.5%;
  height: 75%;
  background-color: #efefef;
  z-index: -1;
  right: 0;
  
}
.semantic-group--middle:before {
  content: ' ';
  position: absolute;
  width: 100%;
  height: 75%;
  background-color: #efefef;
  z-index: -1;
  
}
.semantic-group--end:before {
  content: ' ';
  position: absolute;
  width: 87.5%;
  height: 75%;
  background-color: #efefef;
  z-index: -1;
  left: 0;
}




.grid__cell {
  display: flex;
  align-items: center;
  border: 1px solid green;
  background-color: pink;
  width: 100px;
  height: 50px;
  z-index: 0;
  position: relative;
  margin-left: -4px;
}

.grid__text {
  align-self: center;
}

.grid__row-header.is-stuck + .grid__cell{
  margin-left: 100px;
}

.grid__row-header.is-stuck {
  float: left;
  position: absolute;
  background-color: grey;
}

.grid__header-group {
  overflow-x: scroll;
}

.grid__body {
  overflow: scroll;
  height: 200px;
}

.grid__cell-group {
  width: 600px;
  overflow-x: scroll;
  margin-left: 100px;
  z-index: 0;
}

JavaScript

(function() {
  var target = $("#row-scroll-3");
  $("#row-scroll-1").scroll(function() {
    target.prop("scrollTop", this.scrollTop)
      .prop("scrollLeft", this.scrollLeft);
  });
})();

(function() {
  var target = $("#row-scroll-5");
  $("#row-scroll-1").scroll(function() {
    target.prop("scrollTop", this.scrollTop)
      .prop("scrollLeft", this.scrollLeft);
  });
})();

(function() {
  var target = $("#row-scroll-6");
  $("#row-scroll-1").scroll(function() {
    target.prop("scrollTop", this.scrollTop)
      .prop("scrollLeft", this.scrollLeft);
  });
})();

(function() {
  var target = $("#row-scroll-7");
  $("#row-scroll-1").scroll(function() {
    target.prop("scrollTop", this.scrollTop)
      .prop("scrollLeft", this.scrollLeft);
  });
})();

(function() {
  var target = $("#row-scroll-8");
  $("#row-scroll-1").scroll(function() {
    target.prop("scrollTop", this.scrollTop)
      .prop("scrollLeft", this.scrollLeft);
  });
})();