Troublesome Appearance of Datatables in Bootstrap 4

Question

Troublesome Appearance of Datatables in Bootstrap 4

I've been trying to integrate Datatables with Bootstrap 4, but the end result isn't visually appealing. Even after following the basic example provided on the Datatables site, the table still looks off (refer to the screenshot below).

I have included the necessary files from Datatables' customization page in the header of my html file.

<head>
    <meta charset="utf-8">
    <script type="text/javascript" src="https://cdn.datatables.net/v/bs4-4.0.0/jq-3.2.1/dt-1.10.16/datatables.min.js"></script>
    <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/v/bs4-4.0.0/jq-3.2.1/dt-1.10.16/datatables.min.css"/>
    <title>Report</title>
    <style>
        body {
            padding-top: 20px;
        }
    </style>
</head>

Has anyone encountered this issue before?

Thank you

Check out the screenshot of how Datatables with Bootstrap 4 currently looks:

https://i.sstatic.net/gdKZB.png

css datatables bootstrap-4

Answer 1

Answer №1

To implement the custom CSS, simply add the following code snippet to your stylesheet:

table.dataTable{border-collapse:collapse !important;}

table.dataTable{border-collapse:collapse !important;}

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0/css/bootstrap.css" rel="stylesheet">
<link href="https://cdn.datatables.net/1.10.16/css/dataTables.bootstrap4.min.css" rel="stylesheet">

<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
<script src="https://cdn.datatables.net/1.10.16/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/1.10.16/js/dataTables.bootstrap4.min.js"></script>



<script>
$(document).ready(function() {
    $('#example').DataTable();
} );
</script>

<style>
table.dataTable{border-collapse:collapse !important;}
</style>
</head>

<body>
<table id="example" class="table table-striped table-bordered" style="width:100%">
        <thead>
            <tr>
                <th>Name</th>
                <th>Position</th>
                <th>Office</th>
                <th>Age</th>
                <th>Start date</th>
                <th>Salary</th>
            </tr>
        </thead>
        <tbody>
            <!-- Add your table data here -->
        </tbody>
        <tfoot>
            <tr>
                <th>Name</th>
                <th>Position</th>
                <th>Office</th>
                <th>Age</th>
                <th>Start date</th>
                <th>Salary</th>
            </tr>
        </tfoot>
    </table>
</body>
</html>

Answer 2

To implement the custom CSS, simply add the following code snippet to your stylesheet:

table.dataTable{border-collapse:collapse !important;}

table.dataTable{border-collapse:collapse !important;}

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0/css/bootstrap.css" rel="stylesheet">
<link href="https://cdn.datatables.net/1.10.16/css/dataTables.bootstrap4.min.css" rel="stylesheet">

<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
<script src="https://cdn.datatables.net/1.10.16/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/1.10.16/js/dataTables.bootstrap4.min.js"></script>



<script>
$(document).ready(function() {
    $('#example').DataTable();
} );
</script>

<style>
table.dataTable{border-collapse:collapse !important;}
</style>
</head>

<body>
<table id="example" class="table table-striped table-bordered" style="width:100%">
        <thead>
            <tr>
                <th>Name</th>
                <th>Position</th>
                <th>Office</th>
                <th>Age</th>
                <th>Start date</th>
                <th>Salary</th>
            </tr>
        </thead>
        <tbody>
            <!-- Add your table data here -->
        </tbody>
        <tfoot>
            <tr>
                <th>Name</th>
                <th>Position</th>
                <th>Office</th>
                <th>Age</th>
                <th>Start date</th>
                <th>Salary</th>
            </tr>
        </tfoot>
    </table>
</body>
</html>

Answer 3

Answer №2

Here is some CSS code that will help align buttons, search, and page length:

Before: https://i.sstatic.net/sQt2m.png After: https://i.sstatic.net/uRRqi.png

The CSS code is as follows:

<style>
        .dataTables_length label {
            margin-top: 15px;
            display: inline-flex;
        }
        .dataTables_length label select {
            margin-left: 20px;
            margin-right: 20px;
        }
        .dataTables_length {
            margin-left: 20px;
            margin-right: 20px;

        }
        .dataTables_wrapper {
            display: flex;
            flex-wrap: wrap;

        }
        .dt-buttons {
            padding-top: 10px;
            padding-bottom: 10px;
            flex-wrap: wrap;
        }
        .dataTables_filter {
            margin-top: 12px;
        }
    </style>

The Datatables initialization configurations should include the following:

dom: 'Blfrtip'

To initialize Datatables with buttons for copy, excel, pdf, and print, you need to import the following scripts:

<script src="https://cdn.datatables.net/1.10.16/js/jquery.dataTables.min.js"></script>
    <script src="https://cdn.datatables.net/buttons/1.5.1/js/dataTables.buttons.min.js"></script>
    <script src="https://cdn.datatables.net/buttons/1.5.1/js/buttons.print.min.js"></script>
    <script src="https://cdn.datatables.net/select/1.2.5/js/dataTables.select.min.js"></script>
    <script src="https://cdn.datatables.net/1.10.16/js/dataTables.bootstrap4.min.js"></script>
    <script src="https://cdn.datatables.net/buttons/1.5.1/js/buttons.bootstrap4.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.1.3/jszip.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.32/pdfmake.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.32/vfs_fonts.js"></script>
    <script src="https://cdn.datatables.net/buttons/1.5.1/js/buttons.html5.min.js"></script>
    <script src="https://cdn.datatables.net/buttons/1.5.1/js/buttons.print.min.js"></script>
    <script src="https://cdn.datatables.net/buttons/1.5.1/js/buttons.colVis.min.js"></script>

Here is a full example:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
...
...
...
</body>
</html>

Answer 4

Here is some CSS code that will help align buttons, search, and page length:

Before: https://i.sstatic.net/sQt2m.png After: https://i.sstatic.net/uRRqi.png

The CSS code is as follows:

<style>
        .dataTables_length label {
            margin-top: 15px;
            display: inline-flex;
        }
        .dataTables_length label select {
            margin-left: 20px;
            margin-right: 20px;
        }
        .dataTables_length {
            margin-left: 20px;
            margin-right: 20px;

        }
        .dataTables_wrapper {
            display: flex;
            flex-wrap: wrap;

        }
        .dt-buttons {
            padding-top: 10px;
            padding-bottom: 10px;
            flex-wrap: wrap;
        }
        .dataTables_filter {
            margin-top: 12px;
        }
    </style>

The Datatables initialization configurations should include the following:

dom: 'Blfrtip'

To initialize Datatables with buttons for copy, excel, pdf, and print, you need to import the following scripts:

<script src="https://cdn.datatables.net/1.10.16/js/jquery.dataTables.min.js"></script>
    <script src="https://cdn.datatables.net/buttons/1.5.1/js/dataTables.buttons.min.js"></script>
    <script src="https://cdn.datatables.net/buttons/1.5.1/js/buttons.print.min.js"></script>
    <script src="https://cdn.datatables.net/select/1.2.5/js/dataTables.select.min.js"></script>
    <script src="https://cdn.datatables.net/1.10.16/js/dataTables.bootstrap4.min.js"></script>
    <script src="https://cdn.datatables.net/buttons/1.5.1/js/buttons.bootstrap4.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.1.3/jszip.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.32/pdfmake.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.32/vfs_fonts.js"></script>
    <script src="https://cdn.datatables.net/buttons/1.5.1/js/buttons.html5.min.js"></script>
    <script src="https://cdn.datatables.net/buttons/1.5.1/js/buttons.print.min.js"></script>
    <script src="https://cdn.datatables.net/buttons/1.5.1/js/buttons.colVis.min.js"></script>

Here is a full example:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
...
...
...
</body>
</html>

Answer 5

Answer №3

Ensure to include a DOCTYPE declaration in your HTML markup.

To do this, simply add <!DOCTYPE html> before your <html> tag, like this:

<!DOCTYPE html>
<html>
<head>

Answer 6

Ensure to include a DOCTYPE declaration in your HTML markup.

To do this, simply add <!DOCTYPE html> before your <html> tag, like this:

<!DOCTYPE html>
<html>
<head>

Troublesome Appearance of Datatables in Bootstrap 4

Answer №1

Answer №2

Answer №3

Similar questions

Font Awesome icons within a nested accordion created using Bootstrap

In what ways can the accessibility of a website be impacted by using CSS

Precise column measurement

Is there a way to automatically close all open sub-menus when clicking on a different parent menu item?

Tips for personalizing buddypress groups

What is the best way to adjust the size of my Leaflet map within a Bootstrap collapse module in my Dash application?

Creating a horizontal scrolling section for mobile devices using CSS

The font size on my website fluctuates up and down every time I refresh the page or navigate to a different one

An effective way to apply Bootstrap styles to projected content within an Angular 7+ application

Utilizing Material UI's React framework for maintaining uniform grid column heights

Inequality in spacing between Bootstrap columns

Trouble pausing CSS slide using -webkit-animation-play-state:paused; finding it ineffective

"Kindly complete all mandatory fields" - The undisclosed field is preventing me from submitting

What is the process for editing or importing CSS within a React project?

Is there a way to implement a sticky footer on just a single webpage if that's all I need?

Issue with margin-top in combination with clear:both does not function as expected

Increased height of iPad screen in landscape mode with no body content displayed (iOS7)

Could not locate the CSS file within the HTML document (404)

Ways to split images and text in list items using CSS

Insert a horizontal line within the text