After a long struggle I managed to tweak it:

1. add this after initializing the data table. Avoid adding "scrollY/scrollX", and also avoid enabling "scrollCollapse"

 $('#table_id').wrap('<div class="dataTables_scroll" />'); 

2. Add these to your CSS Styles.

.dataTables_scroll { position: relative; overflow: auto; max-height: 200px;/*the maximum height you want to achieve*/ width: 100%; } 

After a long struggle I managed to tweak it:

1. add this after initializing the data table. Avoid adding "scrollY/scrollX", and also avoid enabling "scrollCollapse"

 $('#table_id').wrap('<div class="dataTables_scroll" />'); 

2. Add these to your CSS Styles.

.dataTables_scroll { position: relative; overflow: auto; max-height: 200px;/*the maximum height you want to achieve*/ width: 100%; }  .dataTables_scroll thead{ position: -webkit-sticky; position: sticky; top: 0; background-color: #fff; z-index: 2; }