Как вы переполняете-x и y HTML - таблицы с помощью CSS или bootstrap 4?

I have a basic html table with 10 columns. I am trying to add a horizontal scroll bar and vertical scroll bar on overflow of the table and am having a really tough time. What is happening now is the th and td content are overflowing with the cell and the thead th and tbody td are misaligned.

JS FIDDLE https://jsfiddle.net/x7ukpogh/1/

<pre><script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>


<table class="table table-responsive-sm table-bordered table-striped table-masterlist">
    <input type="hidden" name="id" data-type="masterlist" id="masterlist">
    <thead>
        <tr>
            <th class="hide-sorting">
                <input type="checkbox" class="parent-check-report" id="checkAll">
            </th>
            <th class="text-nowrap pr-4 sorting_asc" name="id"> ID</th>
            <th class="text-nowrap sorting pr-4" name="position"> RANK</th>
            <th class="text-nowrap sorting pr-4" name="firstName"> NAME</th>
            <th class="text-nowrap sorting pr-4" name="carname">CAR NAME</th>
            <th class="sorting pr-4" name="status">STATUS</th>
            <th class="text-nowrap sorting pr-4" name="signOnDate">SIGN-ON</th>
            <th class="text-nowrap sorting pr-4" name="signOffDate">SIGN-OFF</th>
            <th class="sorting pr-4" name="type">EMPLOYEE TYPE</th>
            <th class="sorting pr-4" name="age">AGE</th>
        </tr>
    </thead>
    <tbody>
        <tr data-crewid="1">
            <td>
                <input type="checkbox" class="check-report" data-id="1">
            </td>
            <td>1</td>
            <td>OFFICER</td>
            <td>CASTRO, JUAN</td>
            <td>AKI STAR</td>
            <td>ON </td>
            <td>2019-06-30</td>
            <td>2019-12-02</td>
            <td>NEW EMPLOYEE</td>
            <td>29</td>
        </tr>
        <tr data-crewid="2">
            <td>
                <input type="checkbox" class="check-report" data-id="2">
            </td>
            <td>2</td>
            <td> ENGINEER</td>
            <td>WELLS, BRYAN</td>
            <td> RAINBOW</td>
            <td>ON </td>
            <td>2019-04-05</td>
            <td>2019-10-31</td>
            <td>NEW EMPLOYEE</td>
            <td>29</td>
        </tr>
        <tr data-crewid="3">
            <td>
                <input type="checkbox" class="check-report" data-id="3">
            </td>
            <td>3</td>
            <td>ASSISTANT </td>
            <td>SMITH, KIM</td>
            <td>LEGENDA</td>
            <td>ON </td>
            <td>2019-04-02</td>
            <td>2019-09-30</td>
            <td>NEW EMPLOYEE</td>
            <td>28</td>
        </tr>
        <tr data-crewid="4">
            <td>
                <input type="checkbox" class="check-report" data-id="4">
            </td>
            <td>4</td>
            <td>CHIEF </td>
            <td>FULLS, JADE</td>
            <td>CRANE </td>
            <td>ON </td>
            <td>2019-04-05</td>
            <td>2019-10-31</td>
            <td>NEW EMPLOYEE</td>
            <td>24</td>
        </tr>
        <tr data-crewid="5">
            <td>
                <input type="checkbox" class="check-report" data-id="5">
            </td>
            <td>5</td>
            <td> ENGINEER</td>
            <td>MC, FRANCE</td>
            <td>MT EVEREST </td>
            <td>ON BOARD</td>
            <td>2019-04-02</td>
            <td>2019-12-31</td>
            <td>NEW EMPLOYEE</td>
            <td>22</td>
        </tr>
        <tr data-crewid="6">
            <td>
                <input type="checkbox" class="check-report" data-id="6">
            </td>
            <td>6</td>
            <td>CHIEF</td>
            <td>BANDAMME, JEAN CLAUDE</td>
            <td></td>
            <td>APPLICANT</td>
            <td>1960-01-01</td>
            <td>1960-01-01</td>
            <td>APPLICANT</td>
            <td>24</td>
        </tr>
        <tr data-crewid="7">
            <td>
                <input type="checkbox" class="check-report" data-id="7">
            </td>
            <td>7</td>
            <td>CHIEF ENGINEER</td>
            <td>JAMES, HELEN JOY</td>
            <td></td>
            <td>APPLICANT</td>
            <td>1960-01-01</td>
            <td>1960-01-01</td>
            <td>NEW EMPLOYEE</td>
            <td>20</td>
        </tr>
        <tr data-crewid="8">
            <td>
                <input type="checkbox" class="check-report" data-id="8">
            </td>
            <td>8</td>
            <td>MASTER</td>
            <td>GARCIA, LORRAINE</td>
            <td></td>
            <td>APPLICANT</td>
            <td>1960-01-01</td>
            <td>1960-01-01</td>
            <td>NEW EMPLOYEE</td>
            <td>22</td>
        </tr>
        <tr data-crewid="9">
            <td>
                <input type="checkbox" class="check-report" data-id="9">
            </td>
            <td>9</td>
            <td>RADIO OFFICER</td>
            <td>CLARKSON, RICHBEL</td>
            <td></td>
            <td>APPLICANT</td>
            <td>1960-01-01</td>
            <td>1960-01-01</td>
            <td>NEW EMPLOYEE</td>
            <td>65</td>
        </tr>
    </tbody>
</table>

table {
    display: block;
    overflow: auto;
}

tbody {
    display: block;
    max-height: 100px;
    overflow: auto;
}

thead, tbody tr {
    display: table;
    width: 100%;
    table-layout: fixed; 
}