JSFiddle - React, Tailwind, and code Playground

by Ntuttle3

HTML

<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta name="description" content="">
    <meta name="author" content="">
    <link rel="icon" href="../../../../favicon.ico">
    <title>Album example for Bootstrap</title>
    <!-- Bootstrap core CSS -->
    <link rel="stylesheet" href="https://cdn.datatables.net/1.10.19/css/jquery.dataTables.min.css">
    <link rel="stylesheet" href="https://cdn.datatables.net/fixedheader/3.1.5/css/fixedHeader.dataTables.min.css">
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
    
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script>
    <script src="https://cdn.datatables.net/fixedheader/3.1.5/js/dataTables.fixedHeader.min.js"></script>
    </head>
<body>
    <header>
            <nav class="navbar navbar-expand-lg navbar-dark bg-dark">
                <a class="navbar-brand" href="/"> <img src="#" height="30" width="30" class="d-inline-block align-top"> Website</a>
                <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button>
                <div class="collapse navbar-collapse" id="navbarSupportedContent">
                    <ul class="navbar-nav mr-auto">
                        <li class="nav-item"> <a class="nav-link" href="#">Office</a> </li>
                    </ul>
                </div>
            </nav>
        </header>
    <main>
    <br>
    <br>


<style>
table.GeneratedTable {
  width: 100%;
  background-color: #ffffff;
 ...

CSS

<style>


    html,
        body {
        height: 100%;
        margin: 0;
    }

    body {
        display: flex;
        flex-direction: column;
    }

    .footer {
        background-color: #003366;
        text-align: center;
        color: white;
        height: 30px;
    }

    #footer-center {
        color: white;
    }

    #footer-right {
        float: right;
        color: blue;
    }

    .navbar-nav li:hover>.dropdown-menu {
        display: block;
        content: none;
    }


    .dropdown-menu.show {
        background-color: #f5f6f7;
    }

    header {
        height: 75px;
        background: red;
        left: 0;
        right: 0;
        width: 100%;
        position: fixed;
        z-index: 500;
    }

    nav {
        background-color: #262626;
        height: 60px;
        width: 100%;
        position: fixed;
        top: 0;
        -webkit-box-shadow: 0px 0px 8px 0px #000000;
        -moz-box-shadow: 0px 0px 8px 0px #000000;
    }

    thead tr th,
        tbody tr td {
        width: 150 px;
        min-width: 150 px;
        max-width: 150 px;    }

    table th {
        position: -webkit-sticky;
        background: #fff;
        text-align: center;
    }

    table {
        font-size: 14px;
    }

    main {
        margin: auto;
        flex: 1;
        padding-top: 75;
        margin: 0 auto;
            width: 90%;

    }

    tr:nth-child(even) {
        background-color: #f2f2f2;
    }

    td {
        text-align: center;
    }

    table tr td:first-child {
        text-align: left;
        padding-left: 25px;
    }
</style>

JavaScript

$(document).ready(function () {
    $('#dtBasicExample').DataTable({
        "searching": true,
        "paging": true,
        "pageLength": 50,
        "info": false,
        "scrollX": true,
        // "fixedHeader": {
        //   "headerOffset": 75
        // }
    })
});