The Javascript shown below is used to initialise the table shown in this example: $(document).ready(function() { var table = $('#example').DataTable( { responsive: true, paging: false } ); new $.fn.dataTable.FixedHeader( table ); } ); In addition to the above code, the following Javascript library files are loaded for use in this example: The solution is to use three tables. This wont work with my code because I'm using bootsrap responsive table which has more than 40 columns and it is not working on fixed header, I unable to find this thing so please help me to create something like that, and that columns will be managed as per its content The top row contains a table for the heading and the bottom row contains a
Step 1 : Download Bootstrap Step 1 : Download Bootstrap Step 3 : HTML Code for Scrolling Table … Responsive table dimensions (wrap it in any size container and it will fill that container) Dynamic row height & column width (no need to specify width and height in pixels) Table rows/columns resize as content resizes. To make this header responsive, we need to apply a few lines of CSS: And if you’ve added it to your css file, then if you start to resize your browser, make it smaller, when you reach 660px width, you’ll see that your logo will jump to the middle, and your navigation will go below the logo and will be centered as well. It is possible to have a table with a scrolling body and fixed header with only HTML and CSS. Download the bootstrap files from here or include directly from CDN Step 2 : CSS code for Bootstrap Table Fixed Header we limit tbody height to 300px (add your value) and set overflow-y to scroll; then to make everything work, we have to set the table's rows and cells to display: block and float: left /* The sticky class is added to the header with JS when it reaches its scroll position */.sticky { position: fixed; top: 0; width: 100%} /* Add some top padding to the page content to prevent sudden quick movement (as the header gets a new position at the top of the page (position:fixed and top:0) */.sticky + … This template is responsive, so nicely displayed also on smaller viewports. Snippet explained. Responsive integration (Bootstrap) FixedHeader will automatically work with the … Build a Bootstrap table with a fixed header and scrollable body using Bootstrap 4.
Below code is used to make the table header sticky and scrollable.
Any number of fixed columns & headers.