Updated with PR comments

demo/angular.json

@@ -33,8 +33,7 @@
  "node_modules/materialize-css/dist/css/materialize.css",
  "node_modules/prism-themes/themes/prism-material-dark.css",
  "src/styles.css",
- "node_modules/prismjs/plugins/toolbar/prism-toolbar.css",
- "node_modules/datatables.net-fixedcolumns-bs4/css/fixedColumns.bootstrap4.css"
+ "node_modules/prismjs/plugins/toolbar/prism-toolbar.css"
  ],
  "scripts": [
  "node_modules/jquery/dist/jquery.js",
@@ -135,8 +134,7 @@
  "node_modules/datatables.net-responsive-dt/css/responsive.dataTables.css",
  "node_modules/datatables.net-select-dt/css/select.dataTables.css",
  "node_modules/materialize-css/dist/css/materialize.css",
- "src/styles.css",
- "node_modules/datatables.net-fixedcolumns-bs4/css/fixedColumns.bootstrap4.css"
+ "src/styles.css"
  ],
  "assets": [
  "src/assets",

demo/package.json

@@ -32,7 +32,6 @@
  "datatables.net-colreorder-dt": "^1.5.5",
  "datatables.net-dt": "^1.11.3",
  "datatables.net-fixedcolumns": "^4.3.0",
- "datatables.net-fixedcolumns-bs4": "^4.3.0",
  "datatables.net-responsive": "^2.2.9",
  "datatables.net-responsive-dt": "^2.2.9",
  "datatables.net-scroller": "^2.0.5",

demo/src/styles.css

@@ -154,3 +154,34 @@ div.code-toolbar > .toolbar button {
 markdown h5:not(markdown.faqMarkdown) {
  color: #2196f3;
 }
+
+
+/** Fixed columns css 
+
+These classes are injected by fixed columns extensions
+and can be tweaked here to match the colors of headers and body
+to hide the scrolling element behind the fixed header.
+
+*/
+
+
+table.dataTable thead tr > .dtfc-fixed-left,
+table.dataTable thead tr > .dtfc-fixed-right,
+table.dataTable tfoot tr > .dtfc-fixed-left,
+table.dataTable tfoot tr > .dtfc-fixed-right {
+ top: 0;
+ bottom: 0;
+ z-index: 3;
+ background-color: white;
+}
+
+table.dataTable tbody tr > .dtfc-fixed-left,
+table.dataTable tbody tr > .dtfc-fixed-right {
+ z-index: 1;
+ background-color: white;
+}
+
+div.dtfc-left-top-blocker,
+div.dtfc-right-top-blocker {
+ background-color: white;
+}