Update

Author: accgit

css/style.scrollbar.css

@@ -3,7 +3,10 @@
    ========================================================================== */
 .scrollbar.table {
     position: relative;
-    overflow: auto;
+}
+
+.scrollbar.table table th {
+    background: #fff;
 }
 
 .ps__rail-x {

package-lock.json

@@ -1,6 +1,6 @@
 {
 	"name": "css-ui-dashboard",
-	"version": "1.1.3",
+	"version": "1.1.4",
 	"description": "Simple and fast dashboard template.",
 	"main": "css/style.dashboard.css",
 	"repository": {
@@ -20,7 +20,8 @@
 		"css-ui-dropdown-menu": "^1.2.0",
 		"css-ui-responsive-menu": "^3.1.3",
 		"css-ui-simple": "^2.5.2",
-		"nanobar": "^0.4.2"
+		"nanobar": "^0.4.2",
+		"floatthead": "^2.1.3"
 	},
 	"homepage": "https://github.com/css-ui/dashboard#readme"
 }

package.json

@@ -169,16 +169,31 @@ Activating the scrollbar on the tables.
 </div>
 
 <!-- javascript scrollbar -->
+<script src="path/to/jquery.floatThead.js"></script>
 <script>
 	$(function() {
 
-		$('.scrollbar.table').each(function() {
+		var table = $('table');
+		var scrollbar = '.scrollbar.table';
+		$(scrollbar).each(function() {
 			new PerfectScrollbar($(this)[0]);
 		});
+		table.floatThead({
+			scrollContainer: function(table) {
+				return table.closest(scrollbar);
+			}
+		});
 	});
 </script>
 ```
 
+Fixed set heights for tables are set in this class.
+```css
+.scrollbar.table {
+    height: 200px;
+}
+```
+
 How to close the displayed message.
 
 ```html