SBG_Viewer

by Jens Kühn

HTML

<div id="freezer-example" style="margin:0">
  <table class="table table-condensed table-freeze-multi table-bordered" data-scroll-height="300" data-cols-number="2">

   <colgroup>
      <col>
      <col>
      <col>
      <col>
      <col>
      <col>
      <col>
      <col>
      <col>
      <col>
    </colgroup>
    <thead>
      <tr>
        <th rowspan="5" colspan="5">
          Siemens AS<br>
          Grenzstrom bei Selektivität I, [kA]<br>
          für 230 / 400 V AC<br>
          gemäß IEC 60947-2<br>
          <br>
          Ausgabe 05/2018
        </th>
        <th rowspan="2"></th>
        <th colspan="14">Vorgeordneter Kompaktleistungsschalter 3VA2 *)</th>
      </tr>
      <tr>
        <th colspan="14">Anlagenschutz</th>
      </tr>
      <tr>
        <th>Auslöser</th>
        <th colspan="14">ETU320 / ETU330 / ETU350 / ETU550 / ETU560 / ETU850 / ETU860</th>
      </tr>
      <tr>
        <th>Baugröße</th>
        <th colspan="5">160 A</th>
        <th colspan="2">250 A</th>
        <th colspan="2">400 A</th>
        <th colspan="2">630 A</th>
        <th colspan="3">1000 A</th>
      </tr>
      <tr>    
        <th>Icu [kA]</th>
        <th colspan="5">55 / 85 / 110</th>
        <th colspan="6">55 / 85 / 110</th>
        <th colspan="3">55 / 85 / 110</th>
      </tr>
      <tr>
        <th colspan="2"></th>
        <th>Charakteristik</th>
        <th>Icu [kA]</th>
        <th>Icu [kA]2</th>
        <th>In [A]</th>
        <th>25</th>
        <th>40</th>
        <th>63</th>
        <th>100</th>
        <th>160</th>
        <th>160</th>
        <th>250</th>
        <th>250</th>
        <th>400</th>
        <th>400</th>
        <th>630</th>
        <th>630</th>
        <th>800</th>
        <th>1000</th>
      </tr>
    </thead>
   <tbody>
      <tr>
        <th rowspan="16" class="rotate90"><div><span>Nachgeordneter Leitungsschutzschalter 5SY4</span></div></th>
        <th rowspan="16" class="rotate90"><div><span>Anlagenschutz</span></div></th>
      ...

SCSS

.table-freeze-multi,
.table-freeze-multi-clone {
  table-layout: fixed;
  width: 100%;
}

.freeze-multi-scroll-wrapper {
  position: relative;
  clear: both;
}

.freeze-multi-scroll-table {}

.freeze-multi-scroll-table-head {
  width: 100%;
  position: relative;
  overflow: hidden;
}

.freeze-multi-scroll-table-head-inner {
  box-sizing: content-box;
}

.freeze-multi-scroll-table-body {
  position: relative;
  overflow: auto;
  width: 100%;
}

.freeze-multi-scroll-left {
  position: absolute;
  top: 0;
  left: 0;
  height: 1px;
}

.freeze-multi-scroll-left-head {
  position: relative;
  top: 0;
  left: 0;
  overflow: hidden;
}

.freeze-multi-scroll-left-body,
.freeze-multi-scroll-left-body-inner {
  position: relative;
  top: 0;
  left: 0;
  overflow: hidden;
}

.freeze-multi-scroll-left-body-inner {
  overflow-y: scroll;
}

/* @see https://davidwalsh.name/detect-scrollbar-width */

/* way the hell off screen */

.freezer-scrollbar-measure {
  width: 100px;
  height: 100px;
  overflow: scroll;
  position: absolute;
  top: -9999px;
}

/*common*/

#freezer-example {
  width: 1000px;
  /* width: 100%; */
  max-height: 500px;
  overflow: hidden;
  margin: 1em auto;
}

#freezer-example .table th,
#freezer-example .table td {
  white-space: nowrap;
}

#freezer-example .table th {
  outline: 1px solid crimson;
  background: #E74C3C;
}

#freezer-example .table thead th {
  outline: 1px solid gold;
}

#freezer-example .table col {
  width: 120px;
}

td {
  text-align:center;
}

.rotate90 {
  > div {
      transform:        
        // 45 is really 360-45
        rotate(-90deg); 
    }
}

JavaScript

$(document).ready(function() {
  jQuery MultiFreezer - scrollable tables with freezed thead and (n) first columns.
  (c) 2017 Jan Renner (http://janrenner.cz, [email protected])
  $('.table-freeze-multi').each(function() {

    var table = $(this),
      scrollbarWidth = freezerGetScrollbarWidth();

    //prepare
    table.css({
      margin: 0
    }).addClass('table-freeze-multi-original').find('tfoot').remove();

    //wrap
    table.wrap('<div class="freeze-multi-scroll-wrapper" />');
    var wrapper = table.closest('.freeze-multi-scroll-wrapper');
    table.wrap('<div class="freeze-multi-scroll-table" />');
    table.wrap('<div class="freeze-multi-scroll-table-body" />');
    var scroller = wrapper.find('.freeze-multi-scroll-table-body');

    //layout
    var headblock = $('<div class="freeze-multi-scroll-table-head-inner" />');
    scroller.before($('<div class="freeze-multi-scroll-table-head" />').append(headblock));
    var topblock = $('<div class="freeze-multi-scroll-left-head" />');
    var leftblock = $('<div class="freeze-multi-scroll-left-body-inner" />');
    wrapper.append(
      $('<div class="freeze-multi-scroll-left" />')
      .append(topblock)
      .append($('<div class="freeze-multi-scroll-left-body" />').append(leftblock))
    );

    //cloning
    var clone = table.clone(true);
    clone.addClass('table-freeze-multi-clone').removeClass('table-freeze-multi-original');
    var colsNumber = table.data('colsNumber') || table.find('tbody tr:first th').length;
    //head
    var cloneHead = clone.clone(true);
    cloneHead.find('tbody').remove();
    headblock.append(cloneHead);
    //top
    var cloneTop = cloneHead.clone(true);
    topblock.append(cloneTop);
    //left
    var cloneLeft = clone.clone(true);
    cloneLeft.find('thead').remove();
    leftblock.append(cloneLeft);

    //sizing
    var scrollHeight = table.data('scrollHeight') || wrapper.parent().closest('*').height();
    var headerHeight = table.find('thead').height();
   ...