Ниже приведен полностью рабочий HTML, который у меня есть, но у него проблема. У меня есть таблица с заголовком и четырьмя строками данных. Первые две строки данных отображаются при загрузке. Под таблицей расположены кнопки навигации, которые позволяют пользователю переключаться между первой страницей (отображаются первые две строки данных) и второй страницей (отображаются последние две строки данных). Когда страница загружена, таблица выглядит хорошо. Но когда нажата какая-либо из кнопок навигации, стол облажается. Во-первых, отсутствуют выравнивания заголовка «Отчет» и «Страница: X / 2» в первой строке таблицы. Во-вторых, ширина каждой строки данных сокращается. Помощь приветствуется. Заранее спасибо.
$('.page-item').on('click', function() {
var currentPage = $(this).val();
$('#page').text('Page: ' + currentPage + ' / 2');
if (currentPage == 1) {
$('#message-0').css('display', 'block');
$('#message-1').css('display', 'block');
$('#message-2').css('display', 'none');
$('#message-3').css('display', 'none');
} else {
$('#message-0').css('display', 'none');
$('#message-1').css('display', 'none');
$('#message-2').css('display', 'block');
$('#message-3').css('display', 'block');
}
});
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
<div class="container-fluid" style="padding-top: 70px;">
<table class="table small">
<thead class="thead-dark">
<tr>
<th scope="col" class="border-0">Report ID: XXXXXX</th>
<th scope="col" class="border-0" style="text-align: center">Report</th>
<th scope="col" id="page" class="border-0" style="text-align: right">Page: 1 / 2</th>
</tr>
<tr>
<th scope="col" colspan="1" class="border-0">Report Date: 15/04/2020</th>
<th scope="col" colspan="2" class="border-0" style="text-align: right">Updated Time: 15/04/2020 11:03:46
</th>
</tr>
</thead>
<tbody>
<tr class="table-success" id="message-0" style="">
<td colspan="3" nowrap>11111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111
<br/>11111111111111111111
<br/>111111111
<br/>1111111111111111111
<br/>1111111111111
<br/>111111111111111111
<br/>11111111111111111111111111111111
<br/>111111111111111111111111111111111111
<br/>11111111111111111111111111111111111
<br/>11111111111111111111111111111111111
<br/>11111111111111
<br/>11111111111
<br/>11111111
<br/>1111111111
<br/>111</td>
</tr>
<tr class="table-success" id="message-1" style="">
<td colspan="3" nowrap>22222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222
<br/>22222222222222222222
<br/>222222222
<br/>2222222222222222222
<br/>2222222222222
<br/>222222222222222222
<br/>22222222222222222222222222222222
<br/>222222222222222222222222222222222222
<br/>22222222222222222222222222222222222
<br/>22222222222222222222222222222222222
<br/>22222222222222
<br/>22222222222
<br/>22222222
<br/>2222222222
<br/>222</td>
</tr>
<tr class="table-success" id="message-2" style="display:none">
<td colspan="3" nowrap>33333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333
<br/>33333333333333333333
<br/>333333333
<br/>3333333333333333333
<br/>3333333333333
<br/>333333333333333333
<br/>33333333333333333333333333333333
<br/>333333333333333333333333333333333333
<br/>33333333333333333333333333333333333
<br/>33333333333333333333333333333333333
<br/>33333333333333
<br/>33333333333
<br/>33333333
<br/>3333333333
<br/>333</td>
</tr>
<tr class="table-success" id="message-3" style="display:none">
<td colspan="3" nowrap>44444444444444444444444444444444444444444444444444444444444444444444444444444444444444444444444444444444444444444444444444444444444444444
<br/>44444444444444444444
<br/>444444444
<br/>4444444444444444444
<br/>4444444444444
<br/>444444444444444444
<br/>44444444444444444444444444444414
<br/>444444444444444444444444444444444444
<br/>44444444444444444444444444444444444
<br/>44444444444444444444444444444444444
<br/>44444444444444
<br/>44444444444
<br/>44444444
<br/>4444444444
<br/>444</td>
</tr>
</tbody>
</table>
<nav aria-label="Pagination">
<ul class="pagination justify-content-center font-weight-medium">
<li id="button-previous-page" class="page-item" value="1" style="cursor: pointer"><a class="page-link svg-icon" aria-label="Previous Page" title="Previous Page" rel="tooltip"><span
aria-hidden="true" data-feather="chevrons-left"><</span></a></li>
<li id="button-next-page" class="page-item" value="2" style="cursor: pointer"><a class="page-link svg-icon" aria-label="Next Page" title="Next Page" rel="tooltip"><span aria-hidden="true" data-feather="chevrons-right">></span></a></li>
</ul>
</nav>
</div>
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>