2

Since other provided solutions (also I want to avoid jQuery like this solution: stackoverflow) to this topic are not working for my case, I opened a new question. How can I make the table header fixed on vertical scroll? 

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<div class=container>
  <div class=row>
    <div class=col-sm-12>
      <div class="table-responsive">
        <table class="table table-condensed table-bordered table-hover fixed_headers">
          <thead>
            <tr>
              <th rowspan="2" style="width: 10px"><span class="text-muted">#</span></th>
              <th rowspan="2">ID</th>
              <th rowspan="2">Name</th>
              <th colspan="4">r 1</th>
              <th colspan="4">r 2</th>
              <th rowspan="2" ng-click="sortTableBy('recognized')" class="change-sort-order">ERK
              </th>
              <th rowspan="2">ERW
              </th>
              <th rowspan="2"><span class="text-muted">Radar</span></th>
              <th rowspan="2"><span class="text-muted">RISS</span></th>
            </tr>
            <tr>
              <th>
                A 1
              </th>
              <th>
                A 2
              </th>
              <th>
                A 3
              </th>
              <th>
                A 4
              </th>
              <th>
                A 1
              </th>
              <th>
                A 2
              </th>
              <th>
                A 3
              </th>
              <th>
                A 4
              </th>
            </tr>
          </thead>
          <tbody>
            <tr>
              <td><span class="text-muted">1</span></td>
              <td>ididid</td>
              <td>name</td>
              <td>
                aaa
              </td>
              <td>
                bbb
              </td>
              <td>
                ccc
              </td>
              <td>
                ddd
              </td>

              <td>
                ee </td>
              <td>
                ffubfhiuwefuh
              </td>
              <td>
                dd
              </td>
              <td>
                gg </td>
              <td>gg
              </td>
              <td ng-class="{'success': x.expected, 'danger':!x.expected}" class="success text-center">
              </td>
              <td>
                <button type="button" class="btn btn-default btn-xs center-block">Show
                                    </button>
              </td>
              <td>

              </td>
            </tr>
            <tr>
              <td><span class="text-muted">1</span></td>
              <td>ididid</td>
              <td>name</td>
              <td>
                aaa
              </td>
              <td>
                bbb
              </td>
              <td>
                ccc
              </td>
              <td>
                ddd
              </td>

              <td>
                ee </td>
              <td>
                ff
              </td>
              <td>
                dd
              </td>
              <td>
                gg </td>
              <td>gg
              </td>
              <td ng-class="{'success': x.expected, 'danger':!x.expected}" class="success text-center">
              </td>
              <td>
                <button type="button" class="btn btn-default btn-xs center-block">Show
                                    </button>
              </td>
              <td>

              </td>
            </tr>
            <tr>
              <td><span class="text-muted">1</span></td>
              <td>ididid</td>
              <td>name</td>
              <td>
                aaa
              </td>
              <td>
                bbb
              </td>
              <td>
                ccc
              </td>
              <td>
                ddd
              </td>

              <td>
                ee </td>
              <td>
                ff
              </td>
              <td>
                dd
              </td>
              <td>
                gg </td>
              <td>gg
              </td>
              <td ng-class="{'success': x.expected, 'danger':!x.expected}" class="success text-center">
              </td>
              <td>
                <button type="button" class="btn btn-default btn-xs center-block">Show
                                    </button>
              </td>
              <td>

              </td>
            </tr>
            <tr>
              <td><span class="text-muted">1</span></td>
              <td>ididid</td>
              <td>name</td>
              <td>
                aaa
              </td>
              <td>
                bbbjiodeijoew
              </td>
              <td>
                ccc
              </td>
              <td>
                ddd
              </td>

              <td>
                ee </td>
              <td>
                ff
              </td>
              <td>
                dd
              </td>
              <td>
                gg </td>
              <td>gg
              </td>
              <td ng-class="{'success': x.expected, 'danger':!x.expected}" class="success text-center">
              </td>
              <td>
                <button type="button" class="btn btn-default btn-xs center-block">Show
                                    </button>
              </td>
              <td>

              </td>
            </tr>
            <tr>
              <td><span class="text-muted">1</span></td>
              <td>ididid</td>
              <td>name</td>
              <td>
                aaa
              </td>
              <td>
                bbb
              </td>
              <td>
                ccc
              </td>
              <td>
                ddd
              </td>

              <td>
                ee </td>
              <td>
                ff
              </td>
              <td>
                dd
              </td>
              <td>
                gg </td>
              <td>gg
              </td>
              <td ng-class="{'success': x.expected, 'danger':!x.expected}" class="success text-center">
              </td>
              <td>
                <button type="button" class="btn btn-default btn-xs center-block">Show
                                    </button>
              </td>
              <td>

              </td>
            </tr>
            <tr>
              <td><span class="text-muted">1</span></td>
              <td>ididid</td>
              <td>name</td>
              <td>
                aaa
              </td>
              <td>
                bbb
              </td>
              <td>
                ccc
              </td>
              <td>
                ddd
              </td>

              <td>
                ee </td>
              <td>
                ff
              </td>
              <td>
                dd
              </td>
              <td>
                gg </td>
              <td>gg
              </td>
              <td ng-class="{'success': x.expected, 'danger':!x.expected}" class="success text-center">
              </td>
              <td>
                <button type="button" class="btn btn-default btn-xs center-block">Show
                                    </button>
              </td>
              <td>

              </td>
            </tr>
            <tr>
              <td><span class="text-muted">1</span></td>
              <td>ididid</td>
              <td>name</td>
              <td>
                aaa
              </td>
              <td>
                bbb
              </td>
              <td>
                ccc
              </td>
              <td>
                ddd
              </td>

              <td>
                ee </td>
              <td>
                ff
              </td>
              <td>
                dd
              </td>
              <td>
                gg </td>
              <td>gg
              </td>
              <td ng-class="{'success': x.expected, 'danger':!x.expected}" class="success text-center">
              </td>
              <td>
                <button type="button" class="btn btn-default btn-xs center-block">Show
                                    </button>
              </td>
              <td>

              </td>
            </tr>
            <tr>
              <td><span class="text-muted">1</span></td>
              <td>ididid</td>
              <td>name</td>
              <td>
                aaa
              </td>
              <td>
                bbb
              </td>
              <td>
                ccc
              </td>
              <td>
                ddd
              </td>

              <td>
                ee </td>
              <td>
                ff
              </td>
              <td>
                dd
              </td>
              <td>
                gg </td>
              <td>gg
              </td>
              <td ng-class="{'success': x.expected, 'danger':!x.expected}" class="success text-center">
              </td>
              <td>
                <button type="button" class="btn btn-default btn-xs center-block">Show
                                    </button>
              </td>
              <td>

              </td>
            </tr>
            <tr>
              <td><span class="text-muted">1</span></td>
              <td>ididid</td>
              <td>name</td>
              <td>
                aaa
              </td>
              <td>
                bbb
              </td>
              <td>
                ccc
              </td>
              <td>
                ddd
              </td>

              <td>
                ee </td>
              <td>
                ff
              </td>
              <td>
                dd
              </td>
              <td>
                gg </td>
              <td>gg
              </td>
              <td ng-class="{'success': x.expected, 'danger':!x.expected}" class="success text-center">
              </td>
              <td>
                <button type="button" class="btn btn-default btn-xs center-block">Show
                                    </button>
              </td>
              <td>

              </td>
            </tr>
            <tr>
              <td><span class="text-muted">1</span></td>
              <td>ididid</td>
              <td>name</td>
              <td>
                aaa
              </td>
              <td>
                bbb
              </td>
              <td>
                ccc
              </td>
              <td>
                ddd
              </td>

              <td>
                ee </td>
              <td>
                ff
              </td>
              <td>
                dd
              </td>
              <td>
                gg </td>
              <td>gg
              </td>
              <td ng-class="{'success': x.expected, 'danger':!x.expected}" class="success text-center">
              </td>
              <td>
                <button type="button" class="btn btn-default btn-xs center-block">Show
                                    </button>
              </td>
              <td>

              </td>
            </tr>
            <tr>
              <td><span class="text-muted">1</span></td>
              <td>ididid</td>
              <td>name</td>
              <td>
                aaa
              </td>
              <td>
                bbb
              </td>
              <td>
                ccc
              </td>
              <td>
                ddd
              </td>

              <td>
                ee </td>
              <td>
                ff
              </td>
              <td>
                dd
              </td>
              <td>
                gg </td>
              <td>gg
              </td>
              <td ng-class="{'success': x.expected, 'danger':!x.expected}" class="success text-center">
              </td>
              <td>
                <button type="button" class="btn btn-default btn-xs center-block">Show
                                    </button>
              </td>
              <td>

              </td>
            </tr>
            <tr>
              <td><span class="text-muted">1</span></td>
              <td>ididid</td>
              <td>name</td>
              <td>
                aaa
              </td>
              <td>
                bbb
              </td>
              <td>
                ccc
              </td>
              <td>
                ddd
              </td>

              <td>
                ee </td>
              <td>
                ff
              </td>
              <td>
                dd
              </td>
              <td>
                gg </td>
              <td>gg
              </td>
              <td ng-class="{'success': x.expected, 'danger':!x.expected}" class="success text-center">
              </td>
              <td>
                <button type="button" class="btn btn-default btn-xs center-block">Show
                                    </button>
              </td>
              <td>

              </td>
            </tr>
            <tr>
              <td><span class="text-muted">1</span></td>
              <td>ididid</td>
              <td>name</td>
              <td>
                aaa
              </td>
              <td>
                bbb
              </td>
              <td>
                ccc
              </td>
              <td>
                ddd
              </td>

              <td>
                ee </td>
              <td>
                ff
              </td>
              <td>
                dd
              </td>
              <td>
                gg </td>
              <td>gg
              </td>
              <td ng-class="{'success': x.expected, 'danger':!x.expected}" class="success text-center">
              </td>
              <td>
                <button type="button" class="btn btn-default btn-xs center-block">Show
                                    </button>
              </td>
              <td>

              </td>
            </tr>
            <tr>
              <td><span class="text-muted">100</span></td>
              <td>ididid</td>
              <td>name</td>
              <td>
                aaa
              </td>
              <td>
                bbb
              </td>
              <td>
                ccc
              </td>
              <td>
                ddd
              </td>

              <td>
                ee </td>
              <td>
                ff
              </td>
              <td>
                dd
              </td>
              <td>
                gg </td>
              <td>gg
              </td>
              <td ng-class="{'success': x.expected, 'danger':!x.expected}" class="success text-center">
              </td>
              <td>
                <button type="button" class="btn btn-default btn-xs center-block">Show
                                    </button>
              </td>
              <td>

              </td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>
  </div>
</div>
d4rty
  • 3,970
  • 5
  • 34
  • 73

4 Answers4

4

$(function () {
  var $window = $(window);
  var $table = $('table');
  var $head = $table.find('thead');
  var $body = $table.find('tbody');
  var $headTds1 = $head.find('tr').eq(0).find('th');
  var $headTds2 = $head.find('tr').eq(1).find('th');
  var $bodyTds = $body.find('tr').eq(0).find('td');
  var tableWidth = $table.outerWidth();
  var $tableNew = $('<table/>');
  var cl = 0; // colspan total length
  var cc = 0; // colspan count

  $table.css({width: tableWidth});
  $tableNew
    .attr("class", $table.attr("class"))
    .css({width: tableWidth});

  $head.css({background: '#fff'});

  $.each($headTds1, function (index, value) {
    var $headTd = $(value);
    var colspan = $headTd.attr('colspan') || 0;

    if (colspan) {
      while (colspan) {
        addwidth($($headTds2[cl]), $($bodyTds[index+cl-cc]));
        colspan--
        cl++
      }
      cc ++;
    } else {
      addwidth($headTd, $($bodyTds[index+cl-cc]));
    }
  });

  function addwidth($headTd, $bodyTd) {
    var headTdwidth2 = $headTd.outerWidth();
    var bodyTdwidth2 = $bodyTd.outerWidth();
    var width2 = headTdwidth2 > bodyTdwidth2 ? headTdwidth2 : bodyTdwidth2;
    
    $bodyTd.css({'width': width2});
    $headTd.css({'width': width2});

    var headTdwidth = $headTd.width();
    var bodyTdwidth = $bodyTd.width();
    var width = headTdwidth > bodyTdwidth ? headTdwidth : bodyTdwidth;
    $bodyTd.html('<div style="width: ' + width + 'px">' + $bodyTd.html() + '</div>');
    $headTd.html('<div style="width: ' + width + 'px">' + $headTd.html() + '</div>');
  }

  $head.appendTo($tableNew);
  $tableNew.insertBefore($table);

  $table.css({'margin-top': $tableNew.height()});

  $tableNew.css({position: 'fixed'});

  $window.scroll(reLeft);
  $window.resize(reLeft);


  function reLeft() {
    $tableNew.css({left: $table.offset().left - $window.scrollLeft()});
  }
});
body{
  overflow-x: auto;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
    <table class="table table-condensed table-bordered table-hover fixed_headers">
        <thead>
        <tr>
            <th rowspan="2" style="width: 10px"><span class="text-muted">#</span></th>
            <th rowspan="2">ID</th>
            <th rowspan="2">Name</th>
            <th colspan="4">r 1</th>
            <th colspan="4">r 2</th>
            <th rowspan="2" ng-click="sortTableBy('recognized')" class="change-sort-order">ERK
            </th>
            <th rowspan="2">ERW
            </th>
            <th rowspan="2"><span class="text-muted">Radar</span></th>
            <th rowspan="2"><span class="text-muted">RISS</span></th>
        </tr>
        <tr>
            <th>
                A 1
            </th>
            <th>
                A 2
            </th>
            <th>
                A 3
            </th>
            <th>
                A 4
            </th>
            <th>
                A 1
            </th>
            <th>
                A 2
            </th>
            <th>
                A 3
            </th>
            <th>
                A 4
            </th>
        </tr>
        </thead>
        <tbody>
        <tr>
            <td><span class="text-muted">1</span></td>
            <td>ididid</td>
            <td>name</td>
            <td>
                aaa
            </td>
            <td>
                bbb
            </td>
            <td>
                ccc
            </td>
            <td>
                ddd
            </td>

            <td>
                ee
            </td>
            <td>
                ffubfhiuwefuh
            </td>
            <td>
                dd
            </td>
            <td>
                gg
            </td>
            <td>gg
            </td>
            <td ng-class="{'success': x.expected, 'danger':!x.expected}" class="success text-center">
            </td>
            <td>
                <button type="button" class="btn btn-default btn-xs center-block">Show
                </button>
            </td>
            <td>

            </td>
        </tr>
        <tr>
            <td><span class="text-muted">1</span></td>
            <td>ididid</td>
            <td>name</td>
            <td>
                aaa
            </td>
            <td>
                bbb
            </td>
            <td>
                ccc
            </td>
            <td>
                ddd
            </td>

            <td>
                ee
            </td>
            <td>
                ff
            </td>
            <td>
                dd
            </td>
            <td>
                gg
            </td>
            <td>gg
            </td>
            <td ng-class="{'success': x.expected, 'danger':!x.expected}" class="success text-center">
            </td>
            <td>
                <button type="button" class="btn btn-default btn-xs center-block">Show
                </button>
            </td>
            <td>

            </td>
        </tr>
        <tr>
            <td><span class="text-muted">1</span></td>
            <td>ididid</td>
            <td>name</td>
            <td>
                aaa
            </td>
            <td>
                bbb
            </td>
            <td>
                ccc
            </td>
            <td>
                ddd
            </td>

            <td>
                ee
            </td>
            <td>
                ff
            </td>
            <td>
                dd
            </td>
            <td>
                gg
            </td>
            <td>gg
            </td>
            <td ng-class="{'success': x.expected, 'danger':!x.expected}" class="success text-center">
            </td>
            <td>
                <button type="button" class="btn btn-default btn-xs center-block">Show
                </button>
            </td>
            <td>

            </td>
        </tr>
        <tr>
            <td><span class="text-muted">1</span></td>
            <td>ididid</td>
            <td>name</td>
            <td>
                aaa
            </td>
            <td>
                bbbjiodeijoew
            </td>
            <td>
                ccc
            </td>
            <td>
                ddd
            </td>

            <td>
                ee
            </td>
            <td>
                ff
            </td>
            <td>
                dd
            </td>
            <td>
                gg
            </td>
            <td>gg
            </td>
            <td ng-class="{'success': x.expected, 'danger':!x.expected}" class="success text-center">
            </td>
            <td>
                <button type="button" class="btn btn-default btn-xs center-block">Show
                </button>
            </td>
            <td>

            </td>
        </tr>
        <tr>
            <td><span class="text-muted">1</span></td>
            <td>ididid</td>
            <td>name</td>
            <td>
                aaa
            </td>
            <td>
                bbb
            </td>
            <td>
                ccc
            </td>
            <td>
                ddd
            </td>

            <td>
                ee
            </td>
            <td>
                ff
            </td>
            <td>
                dd
            </td>
            <td>
                gg
            </td>
            <td>gg
            </td>
            <td ng-class="{'success': x.expected, 'danger':!x.expected}" class="success text-center">
            </td>
            <td>
                <button type="button" class="btn btn-default btn-xs center-block">Show
                </button>
            </td>
            <td>

            </td>
        </tr>
        <tr>
            <td><span class="text-muted">1</span></td>
            <td>ididid</td>
            <td>name</td>
            <td>
                aaa
            </td>
            <td>
                bbb
            </td>
            <td>
                ccc
            </td>
            <td>
                ddd
            </td>

            <td>
                ee
            </td>
            <td>
                ff
            </td>
            <td>
                dd
            </td>
            <td>
                gg
            </td>
            <td>gg
            </td>
            <td ng-class="{'success': x.expected, 'danger':!x.expected}" class="success text-center">
            </td>
            <td>
                <button type="button" class="btn btn-default btn-xs center-block">Show
                </button>
            </td>
            <td>

            </td>
        </tr>
        <tr>
            <td><span class="text-muted">1</span></td>
            <td>ididid</td>
            <td>name</td>
            <td>
                aaa
            </td>
            <td>
                bbb
            </td>
            <td>
                ccc
            </td>
            <td>
                ddd
            </td>

            <td>
                ee
            </td>
            <td>
                ff
            </td>
            <td>
                dd
            </td>
            <td>
                gg
            </td>
            <td>gg
            </td>
            <td ng-class="{'success': x.expected, 'danger':!x.expected}" class="success text-center">
            </td>
            <td>
                <button type="button" class="btn btn-default btn-xs center-block">Show
                </button>
            </td>
            <td>

            </td>
        </tr>
        <tr>
            <td><span class="text-muted">1</span></td>
            <td>ididid</td>
            <td>name</td>
            <td>
                aaa
            </td>
            <td>
                bbb
            </td>
            <td>
                ccc
            </td>
            <td>
                ddd
            </td>

            <td>
                ee
            </td>
            <td>
                ff
            </td>
            <td>
                dd
            </td>
            <td>
                gg
            </td>
            <td>gg
            </td>
            <td ng-class="{'success': x.expected, 'danger':!x.expected}" class="success text-center">
            </td>
            <td>
                <button type="button" class="btn btn-default btn-xs center-block">Show
                </button>
            </td>
            <td>

            </td>
        </tr>
        <tr>
            <td><span class="text-muted">1</span></td>
            <td>ididid</td>
            <td>name</td>
            <td>
                aaa
            </td>
            <td>
                bbb
            </td>
            <td>
                ccc
            </td>
            <td>
                ddd
            </td>

            <td>
                ee
            </td>
            <td>
                ff
            </td>
            <td>
                dd
            </td>
            <td>
                gg
            </td>
            <td>gg
            </td>
            <td ng-class="{'success': x.expected, 'danger':!x.expected}" class="success text-center">
            </td>
            <td>
                <button type="button" class="btn btn-default btn-xs center-block">Show
                </button>
            </td>
            <td>

            </td>
        </tr>
        <tr>
            <td><span class="text-muted">1</span></td>
            <td>ididid</td>
            <td>name</td>
            <td>
                aaa
            </td>
            <td>
                bbb
            </td>
            <td>
                ccc
            </td>
            <td>
                ddd
            </td>

            <td>
                ee
            </td>
            <td>
                ff
            </td>
            <td>
                dd
            </td>
            <td>
                gg
            </td>
            <td>gg
            </td>
            <td ng-class="{'success': x.expected, 'danger':!x.expected}" class="success text-center">
            </td>
            <td>
                <button type="button" class="btn btn-default btn-xs center-block">Show
                </button>
            </td>
            <td>

            </td>
        </tr>
        <tr>
            <td><span class="text-muted">1</span></td>
            <td>ididid</td>
            <td>name</td>
            <td>
                aaa
            </td>
            <td>
                bbb
            </td>
            <td>
                ccc
            </td>
            <td>
                ddd
            </td>

            <td>
                ee
            </td>
            <td>
                ff
            </td>
            <td>
                dd
            </td>
            <td>
                gg
            </td>
            <td>gg
            </td>
            <td ng-class="{'success': x.expected, 'danger':!x.expected}" class="success text-center">
            </td>
            <td>
                <button type="button" class="btn btn-default btn-xs center-block">Show
                </button>
            </td>
            <td>

            </td>
        </tr>
        <tr>
            <td><span class="text-muted">1</span></td>
            <td>ididid</td>
            <td>name</td>
            <td>
                aaa
            </td>
            <td>
                bbb
            </td>
            <td>
                ccc
            </td>
            <td>
                ddd
            </td>

            <td>
                ee
            </td>
            <td>
                ff
            </td>
            <td>
                dd
            </td>
            <td>
                gg
            </td>
            <td>gg
            </td>
            <td ng-class="{'success': x.expected, 'danger':!x.expected}" class="success text-center">
            </td>
            <td>
                <button type="button" class="btn btn-default btn-xs center-block">Show
                </button>
            </td>
            <td>

            </td>
        </tr>
        <tr>
            <td><span class="text-muted">1</span></td>
            <td>ididid</td>
            <td>name</td>
            <td>
                aaa
            </td>
            <td>
                bbb
            </td>
            <td>
                ccc
            </td>
            <td>
                ddd
            </td>

            <td>
                ee
            </td>
            <td>
                ff
            </td>
            <td>
                dd
            </td>
            <td>
                gg
            </td>
            <td>gg
            </td>
            <td ng-class="{'success': x.expected, 'danger':!x.expected}" class="success text-center">
            </td>
            <td>
                <button type="button" class="btn btn-default btn-xs center-block">Show
                </button>
            </td>
            <td>

            </td>
        </tr>
        <tr>
            <td><span class="text-muted">100</span></td>
            <td>ididid</td>
            <td>name</td>
            <td>
                aaa
            </td>
            <td>
                bbb
            </td>
            <td>
                ccc
            </td>
            <td>
                ddd
            </td>

            <td>
                ee
            </td>
            <td>
                ff
            </td>
            <td>
                dd
            </td>
            <td>
                gg
            </td>
            <td>gg
            </td>
            <td ng-class="{'success': x.expected, 'danger':!x.expected}" class="success text-center">
            </td>
            <td>
                <button type="button" class="btn btn-default btn-xs center-block">Show
                </button>
            </td>
            <td>

            </td>
        </tr>
        </tbody>
    </table>
</div>
Mixa
  • 326
  • 1
  • 7
2

You can get it with the help of css itself, You can add the following in your css,

thead {
    display: table;
    width: calc( 100% - 1em );
    table-layout: fixed;
}
tbody {
    display: block;
    height: 240px;
    overflow: auto;
}

If you don't wish to give the styles to thead and tbody , You can also give a class to it and then you can use the above css code..

Here is the jsfiddle link that works as per your requirement,

https://jsfiddle.net/t0vek036/

Maniraj Murugan
  • 8,868
  • 20
  • 67
  • 116
  • this do not work, as the relation between´td´ in ´thead´ and ´td´ in ´tbody´ will break. Here is the screenshot of your fiddle https://ibb.co/fiucDQ –  Jun 22 '17 at 13:22
0

You could use the CSS attribute position: fixed;. I added it to the table <thead> inline. Do keep in mind it is better to use a seperate stylesheet. Next to that you'll have to do some style fixing over the header of the table so that it connects to the table <tbody> in the correct way. I would like to help you with it if you want to.

Look at the JSfiddle

Since the body was too long i had to put it in a seperate JSfiddle. Just copy and paste the code.

Hope this helps!

Deathstorm
  • 818
  • 11
  • 36
  • This doesn't work together with horizontal scrolling – d4rty Jun 22 '17 at 14:00
  • @d4rty Iknow, as i've told. You'll have to adjust the `CSS` to create a better view and make the scroll horizontal not possible. You we're looking for a solution `CSS` only. So thats why i gave this answer – Deathstorm Jun 22 '17 at 14:06
0

You can put your table in a vertical scrolling text area using following methods:

Method 1

<style>
.divScroll{ 
            white-space: nowrap; 
            overflow-y: scroll;
            font-size:14px;
            height:200px;
            width:auto;
            background-color:#bdbdbd;
        }
</style>
<div class="divScroll">
"INSERT TABLE HERE"
</div>

Method 2

<div style="border: 1px solid black; overflow-y: auto; white-space: nowrap; height: 200px; width: auto; color: black; background-color: white;">
"INSERT TABLE HERE"
</div>

I believes you are asking about vertical scrolling of entire table...

Arun
  • 343
  • 3
  • 12