Как вы переполняете-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; }