Datatable s fixní hlaviškou patičkou, scroll uvnitř

by Petr Haluza

HTML

<html>
  <head>
    <script src="https://code.jquery.com/jquery-1.11.1.min.js"></script>

    <link href="//datatables.net/download/build/nightly/jquery.dataTables.css" rel="stylesheet" type="text/css" />
    <script src="//datatables.net/download/build/nightly/jquery.dataTables.js"></script>

    <meta charset=utf-8 />
    <title>DataTables - JS Bin</title>
  </head>
  <body>
    <div class="container">
      <table id="example"
        datatable="" width="100%" cellspacing="0"
        data-page-length="33"
        data-scroll-x="true"
        scroll-collapse="false">
        <thead>
<tr>
                                                    <!-- 0 -->
                                                    <th>Obr.</th>
                                                    <!-- 1 -->
                                                    <th>
                                                            <span class="sortp" data="4" data-link="/cs/kategorie/24013?sortFiltrControl-sorttype=4&amp;sortFiltrControl-style=3&amp;sortFiltrControl-productsperpageFiltr=60&amp;sortFiltrControl-stock=0&amp;sortFiltrControl-stocktype=1&amp;sortFiltrControl-stistatus=0&amp;sortFiltrControl-stoid=0&amp;do=sortFiltrControl-sortChange">Název</span>
                                                    </th>
                                                    <!-- 2 -->
                                                    <th>Kód</th>
                                                    <!-- 3 -->
                                                    <th>PN</th>
                                                    <!-- 4 -->
                                                    <th>Status</th>
                                                    <!-- 5 -->
                                                            <th>Brno</th>
                                                            <th>ČB</th>
                                                            <th>Ext</th>
                              ...

CSS

html, body {
  height: 100%;
  width: 100%;
  max-width: 100%;
  overflow-y: hidden;
}

.container {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex: 1 1 auto;
  -ms-flex: 1 1 auto;
  flex: 1 1 auto;
  height: 80%;
  width: 60%;
  background-color: #f0f0f0;
  border: 1px solid blue;
  margin-top: 1rem;
  padding: 1rem;
}

.dataTables_wrapper {
  width: 100%;
  overflow: hidden;
  -webkit-overflow-scrolling: touch;
  -ms-overflow-style: -ms-autohiding-scrollbar;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-flow: column nowrap;
  -ms-flex-flow: column nowrap;
  flex-flow: column nowrap;
  -webkit-flex: 1 1 auto;
  -ms-flex: 1 1 auto;
  flex: 1 1 auto;
}

table.dataTable {
  background-color: #fff;
  width: 100%;
  margin: 0 auto;
  clear: both;
  border-collapse: separate;
  border-spacing: 0;
}

table.dataTable thead,
table.dataTable tfoot {
  background-color: #f5f5f5;
}

table.dataTable thead th,
table.dataTable tfoot th {
  font-weight: bold;
  border-bottom: 1px solid #111111;
}

table.dataTable thead th:active,
table.dataTable thead td:active {
  outline: none;
}

table.dataTable tr.even,
table.dataTable tr.alt,
table.dataTable tr:nth-of-type(even) {
  background: #F9F9F9;
}

table.dataTable th,
table.dataTable td {
  padding: 1rem;
  white-space: nowrap;
  text-align: left;
}

table.dataTable tfoot th,
table.dataTable tfoot td {
  border-top: 1px solid #111111;
}

table.dataTable tbody > tr:hover {
  background-color: lightblue;
}

table.dataTable,
table.dataTable th,
table.dataTable td {
  -webkit-box-sizing: content-box;
  -moz-box-sizing: content-box;
  box-sizing: content-box;
}

.dataTables_wrapper .dataTables_scroll {
  clear: both;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-flow: column nowrap;
  -ms-flex-flow: column nowrap;
  flex-flow: column nowrap;
  -webkit-flex: 1 1 auto;
  -ms-flex: 1 1 auto;
  flex: 1 1 auto;
  border: 1px solid #ccc;
 ...

JavaScript

$(document).ready( function () {
  var table = $('#example').DataTable();
} );