【发布时间】：2020-04-15 03:52:40
【问题描述】：
以下是我拥有的完全正常工作的 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>【问题讨论】：
标签： jquery html css twitter-bootstrap bootstrap-4