ScrollY issue in Datatable

Question

I am using Datatable to give style to my table in HTML and I had to enable the ScrollY. Although It worked, it has a style problem that I am trying to solve. When you resize the window, for some reason, the header of the table doesn't resize with the table itself. I had some research and I found out when the web page is ready,it creates this tags related to the table:

<div class="dataTables_scrollHeadInner" style="box-sizing: content-box; width: 1632px; padding-right: 0px;">
<table class="table table-hover table-striped cell-border table-bord dataTable no-footer" style="width: 1632px; margin-left: 0px;">

My original table still exists, but It creates these tags to do some things.

• I tried give to my table a style ="width:100%", but this created tags don't change with my table.
• I also tried to change it through JS using the class as reference and directly in css using the class as reference but it didn't work.
• I tried to use tableMain.columns.adjust().draw(), didn't work.
• Only when you inspect the page and change it through the page you can solve it.

HTML:

<div class="box-body table-responsive">
            <table id="tbMain" class="table table-hover table-striped cell-border table-bord" style="width:100%">
                <thead>
                <tr>
                    <th rowspan="2"></th>
                    <th rowspan="2">COLUMN 1</th>
                    <th rowspan="2"></th>
                    <th rowspan="2">COLUMN 2</th>
                    <th colspan="1">COLUMN 3</th>
                    <th rowspan="2">COLUMN 4</th>
                </tr>
                <tr>
                    <th>COLUMN 5</th>
                </tr>
                </thead>
                <tbody>
                </tbody>
            </table>
        </div>

JS:

let tableMain = $('#tbMain').DataTable({
        'scrollY': '400px',
        'scrollCollapse': true,
        'responsive': true,
        'ordering': false,
        'order': [1, 'asc'],
        'columns': [
            {width: '5%', className: 'text-center'},
            {width: '5%', className: 'text-center'},
            {width: '30%', className: 'text-center'},
            {width: '40%', className: 'text-center'},
            {width: '10%', className: 'text-center'},
            {width: '10%', className: 'text-center'}
        ],
        'buttons': []
        }
    });
    $("body").css("overflow", "hidden");

I used Bootstrap 3.3.6 and Datatable 1.11.5.

I hope you can help me.

Answer 1

The issue you're experiencing with the header not resizing correctly in DataTables when using the scrollY option is a common problem. Here are some steps and solutions to help ensure the header resizes properly:

1. Ensure Proper Initialization and Configuration

First, make sure that you are initializing DataTables properly and that your table and container have the correct CSS properties. Ensure that the DataTables CSS is included in your project.

2. Adjust Column Widths

Make sure that the column widths add up to 100% or that they are adjusted properly. This can sometimes cause issues with resizing. Since you are using fixed widths, you might need to set them to percentages.

3. Use the columns.adjust() Method

You mentioned that you tried tableMain.columns.adjust().draw() but it didn't work. Ensure that you call this method after the window resize event.

$(window).on('resize', function() {
    tableMain.columns.adjust().draw();
});

4. CSS Adjustments

Sometimes additional CSS adjustments can help. Add the following CSS to ensure the table's container and its header adjust properly:

.dataTables_scrollHeadInner, .dataTables_scrollHeadInner table {
    width: 100% !important;
}

.dataTables_scrollBody {
    overflow: auto;
}

5. Destroy and Reinitialize the Table

As a last resort, you can destroy and reinitialize the table upon window resize. This is a bit more brute force but can solve the problem if other methods fail.

$(window).on('resize', function() {
    tableMain.destroy();
    tableMain = $('#tbMain').DataTable({
        'scrollY': '400px',
        'scrollCollapse': true,
        'responsive': true,
        'ordering': false,
        'order': [1, 'asc'],
        'columns': [
            {width: '5%', className: 'text-center'},
            {width: '5%', className: 'text-center'},
            {width: '30%', className: 'text-center'},
            {width: '40%', className: 'text-center'},
            {width: '10%', className: 'text-center'},
            {width: '10%', className: 'text-center'}
        ],
        'buttons': [],
        'autoWidth': false // Disable autoWidth to ensure column widths are respected
    });
});

Here's a complete example including all necessary HTML, JavaScript, and CSS code to initialize DataTables with the scrollY option and handle resizing correctly:

$(document).ready(function() {
    let tableMain = $('#tbMain').DataTable({
        'scrollY': '400px', // Set your desired height
        'scrollCollapse': true,
        'responsive': true,
        'ordering': false,
        'order': [1, 'asc'],
        'columns': [
            {width: '5%', className: 'text-center'},
            {width: '5%', className: 'text-center'},
            {width: '30%', className: 'text-center'},
            {width: '40%', className: 'text-center'},
            {width: '10%', className: 'text-center'},
            {width: '10%', className: 'text-center'}
        ],
        'buttons': [],
        'autoWidth': false // Disable autoWidth to ensure column widths are respected
    });

    // Optional: Adjust table columns on window resize
    $(window).on('resize', function() {
        tableMain.columns.adjust().draw();
    });
});

.dataTables_scrollHeadInner, .dataTables_scrollHeadInner table {
    width: 100% !important;
}

.dataTables_scrollBody {
    overflow: auto;
}

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<!-- Include DataTables CSS -->
<link rel="stylesheet" href="https://cdn.datatables.net/1.11.5/css/dataTables.bootstrap4.min.css">
<!-- Include jQuery -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<!-- Include DataTables JS -->
<script src="https://cdn.datatables.net/1.11.5/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/1.11.5/js/dataTables.bootstrap4.min.js"></script>
<!-- Include Bootstrap JS -->
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>

<div class="container">
    <div class="row mt-4">
        <div class="col">
            <div class="box-body table-responsive">
                <table id="tbMain" class="table table-hover table-striped cell-border table-bordered">
                    <thead>
                    <tr>
                        <th rowspan="2"></th>
                        <th rowspan="2">COLUMN 1</th>
                        <th rowspan="2"></th>
                        <th rowspan="2">COLUMN 2</th>
                        <th colspan="1">COLUMN 3</th>
                        <th rowspan="2">COLUMN 4</th>
                    </tr>
                    <tr>
                        <th>COLUMN 5</th>
                    </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td>1</td>
                            <td>Value 1</td>
                            <td>2</td>
                            <td>Value 2</td>
                            <td>Value 3</td>
                            <td>Value 4</td>
                        </tr>
                        <tr>
                            <td>2</td>
                            <td>Value 5</td>
                            <td>6</td>
                            <td>Value 7</td>
                            <td>Value 8</td>
                            <td>Value 9</td>
                        </tr>
                        <!-- Add more rows as needed -->
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</div>