LOADING...

Preview

Pen ID
Unlock Campus Themeforest adv

 

Code
Sample Text Amount Amount Amount Amount Amount Amount Amount Amount Amount Amount Amount Amount Amount Amount Amount Amount
Title Subject $20k $20k $20k $20k $20k $20k $20k $20k $20k $20k $20k $20k $20k $20k $20k $20k
Title Subject $20k $20k $20k $20k $20k $20k $20k $20k $20k $20k $20k $20k $20k $20k $20k $20k
Title Subject $20k $20k $20k $20k $20k $20k $20k $20k $20k $20k $20k $20k $20k $20k $20k $20k
Title Subject $20k $20k $20k $20k $20k $20k $20k $20k $20k $20k $20k $20k $20k $20k $20k $20k
Title Subject $20k $20k $20k $20k $20k $20k $20k $20k $20k $20k $20k $20k $20k $20k $20k $20k
Title Subject $20k $20k $20k $20k $20k $20k $20k $20k $20k $20k $20k $20k $20k $20k $20k $20k
Title Subject $20k $20k $20k $20k $20k $20k $20k $20k $20k $20k $20k $20k $20k $20k $20k $20k
Title Subject $20k $20k $20k $20k $20k $20k $20k $20k $20k $20k $20k $20k $20k $20k $20k $20k
Title Subject $20k $20k $20k $20k $20k $20k $20k $20k $20k $20k $20k $20k $20k $20k $20k $20k
Title Subject $20k $20k $20k $20k $20k $20k $20k $20k $20k $20k $20k $20k $20k $20k $20k $20k
Title Subject $20k $20k $20k $20k $20k $20k $20k $20k $20k $20k $20k $20k $20k $20k $20k $20k
Title Subject $20k $20k $20k $20k $20k $20k $20k $20k $20k $20k $20k $20k $20k $20k $20k $20k
Title Subject $20k $20k $20k $20k $20k $20k $20k $20k $20k $20k $20k $20k $20k $20k $20k $20k
Title Subject $20k $20k $20k $20k $20k $20k $20k $20k $20k $20k $20k $20k $20k $20k $20k $20k
CSS
.container {
  max-width: 960px;
  height: auto;
  overflow: auto;
  margin: 40px auto;
}

.header-fixed {
  position: absolute;
  background: #fff;
  overflow: hidden;
  border-right: thin solid gray;
  padding: 0 10px;
}
.header-fixed tbody {
  overflow-y: auto;
}

table {
  height: auto;
  table-layout: fixed;
  max-width: 980px;
}
table thead {
  display: block;
  margin-right: 18px;
}
table thead tr {
  table-layout: fixed;
}
table thead tr th {
  white-space: nowrap;
}
table thead tr th {
  border: thin solid gray;
  padding: 10px 10px;
  font-size: 14px;
  font-weight: bold;
}
table thead tr th:nth-child(1) {
  min-width: 160px;
  table-layout: fixed;
}
table thead tr th:nth-child(2) {
  margrin-left: 160px;
}
table thead tr th:last-child {
  margin-right: 20px;
}
table tbody {
  height: 300px;
  overflow: auto;
  display: block;
}
table tbody tr {
  display: table;
  width: 100%;
}
table tbody tr td {
  border: thin solid gray;
  padding: 10px 10px;
  font-size: 12px;
  overflow: hidden;
  text-overflow: elipsis;
  white-space: nowrap;
  display: table-cell;
}
table tbody tr td:nth-child(1) {
  table-layout: fixed;
  width: 160px;
}
JS
$(function() {
    //column width setup
    var $tBodyCell = $('.tbody tr:first td');
    var $tHeaderCell = $('.theader tr th');
    $tBodyCell.each(function(index) {
        $tHeaderCell.eq(index).width($(this).width());
    });
    //vertical header setup
    $(".matrixTable").clone().appendTo(".header-fixed");
    var frstTdChildWdth = $('.header-fixed .matrixTable thead tr th:first-child').width();
    $('.header-fixed').css('width', frstTdChildWdth);
    $('.header-fixed .matrixTable thead tr th').not('.header-fixed .matrixTable thead tr th:first-child').remove();
    $('.header-fixed .matrixTable tbody tr td').not('.header-fixed .matrixTable tbody tr td:first-child').remove();
    //vertical scroll trigger to header
    var target = $(".header-fixed .matrixTable tbody")[0];
    $(".matrixTable tbody").scroll(function() {
        target.scrollTop = this.scrollTop;
        target.scrollLeft = this.scrollLeft;
    });

    $('.header-fixed').hover(function() {
        $('.header-fixed .matrixTable tbody').css("overflow", "hidden");
    });
})
Term
Sat, 04/14/2018 - 20:49

Related Codes

Pen ID
Pen ID
Pen ID
Square Adv