dashboard2

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Test-Dashboard</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/dc/3.0.9/dc.min.css">

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.2.0/css/bootstrap.min.css">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/keen/dashboards@gh-pages/assets/css/keen-dashboards.css">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.2.0/js/bootstrap.min.js"></script>
    
    <style>
        html, body {
            height: 100%;
            width: 100%;
        }

.svg-container {
            width: 100%;
        }

.irs--big.irs-with-grid {
            height: 70px;
            width: 500px;
            margin-left: 5%;
        }

/*thead {
    display: table;
    table-layout:fixed;
    width: 100%;
}
tbody {
    display: block;
    height: 19em;
    overflow-y: scroll;
}
tbody tr {
    display: table;
    table-layout:fixed;
    width: 100%;
}
th, td {
    width: auto;
    
}*/

table {
      display: table;
      width: 100%;
    }

table thead,
    table tbody {
      width: 100%;
    }

table thead {
      overflow-y: scroll;
      display: table;
      table-layout: fixed;
      width: calc(100% - 16px);  assuming scrollbar width as 16px 
    }

table tbody {
      overflow: auto;
      height: 150px;
      display: block;
    }

table tr {
      width: 100%;
      text-align: left;
      display: table;
      table-layout: fixed;
    }

/*    .chart-wrapper {
        display: none;
    }*/

#focus .axis.x .tick text {
        text-anchor: end;
        transform: rotate(-60deg) translate(-10px,-12px);
      }
      #range.dc-chart .axis {
        display: none;
      }
      #range svg {
          display: block; /* default inline causes padding? */
      }

/* disable hover behaviors on background chart */
      .dc-chart .sub._0 rect.bar:hover {
          fill-opacity: 1;
      }

.dc-chart .sub._0 rect.bar {
          cursor: pointer;
      }

</style>
</head>
<body class="keen-dashboard">
    
    <div class="navbar navbar-inverse navbar-fixed-top" role="navigation">
        <div class="container-fluid">
            <div class="navbar-header">
                <span>
                    <a class="navbar-brand" title="Click to view data source" target="_blank" href="https://github.com/square/crossfilter/wiki/API-Reference">
                        Dc.js Simple Dashboard
                    </a>
                </span>
            </div>
        </div>
    </div>
  <div class="container">
    <div class="row">
      <div class="table-responsive col-md-12">
        <h4>Filtered Records</h4>
        <table class='table table-hover table-striped table-bordered' id='dc-table-graph'>
          <thead>
            <tr class='table-header'>
              
            </tr>
          </thead>
        </table>

      </div>
    </div>
    <div id="vertical-whitespace" style="padding: 10px"></div>
  </div>

<div class="col-lg-6 col-md-6">
                <div class="row">
                    <div class="col-lg-12 col-md-12">
                        <div class="chart-wrapper">
                            <div class="chart-stage">
                                <div id="bar-chart" class="svg-container">
                                    <div class="chart-title">
                                        <span>
                                            <strong>Bar Types</strong>
                                        </span>
                                        <span>
                                                <a id="reset-focus" href="#" class="reset">reset</a>&emsp;&emsp;
                                                <a id="reset-all" href="javascript:dc.filterAll(); dc.redrawAll();" class="reset">reset all</a>
                                            
                                        </span>
                                        
                                        <div id="focus"></div>
                                        <div id="first-letters"></div>

</div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

<div class="col-lg-6 col-md-6">
                <div class="row">
                    <div class="col-lg-12 col-md-12">
                        <div class="chart-wrapper">
                            <div class="chart-stage">
                                <div id="pie-chart" class="svg-container">
                                    <div class="chart-title">
                                        <span>
                                            <strong>Pie Types</strong>
                                        </span>
                                        <span>
                                            <a href="javascript:pieChart.filterAll(); dc.redrawAll();" style="display:none;" class="reset">reset</a>
                                        </span>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
      <h2>Range</h2>
    <div id="ui"></div>

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/ion-rangeslider/2.3.1/css/ion.rangeSlider.min.css"/>
    
    
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
    
    
    <script src="https://cdnjs.cloudflare.com/ajax/libs/ion-rangeslider/2.3.1/js/ion.rangeslider.min.js"></script>
    
    <script src="https://d3js.org/d3-color.v1.min.js"></script>
    <script src="https://d3js.org/d3-interpolate.v1.min.js"></script>
    <script src="https://d3js.org/d3-scale-chromatic.v1.min.js"></script>

</html>

Updated missing url https://rawgit.com/crossfilter/reductio/master/reductio.min.js to https://cdn.jsdelivr.net/gh/crossfilter/reductio/reductio.min.js

Updated missing url https://cdnjs.cloudflare.com/ajax/libs/ion-rangeslider/2.3.1/js/ion.rangeSlider.js to https://cdnjs.cloudflare.com/ajax/libs/ion-rangeslider/2.3.1/js/ion.rangeslider.js

Updated missing url https://cdnjs.cloudflare.com/ajax/libs/ion-rangeslider/2.3.1/js/ion.rangeSlider.min.js to https://cdnjs.cloudflare.com/ajax/libs/ion-rangeslider/2.3.1/js/ion.rangeslider.min.js

https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js

https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.2.0/js/bootstrap.min.js

https://rawgit.com/crossfilter/reductio/master/reductio.min.js

https://cdn.jsdelivr.net/underscorejs/1.5.2/underscore-min.js

https://cdnjs.cloudflare.com/ajax/libs/coffee-script/1.4.0/coffee-script.min.js

https://cdnjs.cloudflare.com/ajax/libs/ion-rangeslider/2.3.1/js/ion.rangeSlider.js

https://cdnjs.cloudflare.com/ajax/libs/crossfilter/1.3.7/crossfilter.js

https://cdnjs.cloudflare.com/ajax/libs/d3/5.15.1/d3.js

https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js

https://cdnjs.cloudflare.com/ajax/libs/dc/3.2.1/dc.js

https://cdnjs.cloudflare.com/ajax/libs/reductio/1.0.0/reductio.js

https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.26.0/babel.min.js

https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js

https://cdnjs.cloudflare.com/ajax/libs/ion-rangeslider/2.3.1/js/ion.rangeSlider.min.js

https://d3js.org/d3-color.v1.min.js

https://d3js.org/d3-interpolate.v1.min.js

https://d3js.org/d3-scale-chromatic.v1.min.js