title: Bootstrap table alignment problem when hiding/showing table rows
body: <p>Below is a fully working HTML that I have, but it is having a problem. I have a table with a header and four data rows. The first two data rows are displayed on load. There are navigation buttons below the table that allows the user to toggle between the first page (shows the first two data rows) and the second page (shows last two data rows). When the page is loaded, the table looks fine. But when any of the navigation buttons is clicked, the table gets screwed up. Firstly, the alignments of the "Report" title and "Page: X / 2" on the first row of the table are out. Secondly, the row width of each data row gets shortened. Help is appreciated. Thanks in advance.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>$('.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');
      }
  });</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css"&gt;
  
  &lt;div class="container-fluid" style="padding-top: 70px;"&gt;
      &lt;table class="table small"&gt;
          &lt;thead class="thead-dark"&gt;
              &lt;tr&gt;
                  &lt;th scope="col" class="border-0"&gt;Report ID: XXXXXX&lt;/th&gt;
                  &lt;th scope="col" class="border-0" style="text-align: center"&gt;Report&lt;/th&gt;
                  &lt;th scope="col" id="page" class="border-0" style="text-align: right"&gt;Page: 1 / 2&lt;/th&gt;
              &lt;/tr&gt;
              &lt;tr&gt;
                  &lt;th scope="col" colspan="1" class="border-0"&gt;Report Date: 15/04/2020&lt;/th&gt;
                  &lt;th scope="col" colspan="2" class="border-0" style="text-align: right"&gt;Updated Time: 15/04/2020 11:03:46
                  &lt;/th&gt;
              &lt;/tr&gt;
          &lt;/thead&gt;
          &lt;tbody&gt;
              &lt;tr class="table-success" id="message-0" style=""&gt;
                  &lt;td colspan="3" nowrap&gt;11111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111
                      &lt;br/&gt;11111111111111111111
                      &lt;br/&gt;111111111
                      &lt;br/&gt;1111111111111111111
                      &lt;br/&gt;1111111111111
                      &lt;br/&gt;111111111111111111
                      &lt;br/&gt;11111111111111111111111111111111
                      &lt;br/&gt;111111111111111111111111111111111111
                      &lt;br/&gt;11111111111111111111111111111111111
                      &lt;br/&gt;11111111111111111111111111111111111
                      &lt;br/&gt;11111111111111
                      &lt;br/&gt;11111111111
                      &lt;br/&gt;11111111
                      &lt;br/&gt;1111111111
                      &lt;br/&gt;111&lt;/td&gt;
              &lt;/tr&gt;
              &lt;tr class="table-success" id="message-1" style=""&gt;
                  &lt;td colspan="3" nowrap&gt;22222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222
                      &lt;br/&gt;22222222222222222222
                      &lt;br/&gt;222222222
                      &lt;br/&gt;2222222222222222222
                      &lt;br/&gt;2222222222222
                      &lt;br/&gt;222222222222222222
                      &lt;br/&gt;22222222222222222222222222222222
                      &lt;br/&gt;222222222222222222222222222222222222
                      &lt;br/&gt;22222222222222222222222222222222222
                      &lt;br/&gt;22222222222222222222222222222222222
                      &lt;br/&gt;22222222222222
                      &lt;br/&gt;22222222222
                      &lt;br/&gt;22222222
                      &lt;br/&gt;2222222222
                      &lt;br/&gt;222&lt;/td&gt;
              &lt;/tr&gt;
              &lt;tr class="table-success" id="message-2" style="display:none"&gt;
                  &lt;td colspan="3" nowrap&gt;33333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333
                      &lt;br/&gt;33333333333333333333
                      &lt;br/&gt;333333333
                      &lt;br/&gt;3333333333333333333
                      &lt;br/&gt;3333333333333
                      &lt;br/&gt;333333333333333333
                      &lt;br/&gt;33333333333333333333333333333333
                      &lt;br/&gt;333333333333333333333333333333333333
                      &lt;br/&gt;33333333333333333333333333333333333
                      &lt;br/&gt;33333333333333333333333333333333333
                      &lt;br/&gt;33333333333333
                      &lt;br/&gt;33333333333
                      &lt;br/&gt;33333333
                      &lt;br/&gt;3333333333
                      &lt;br/&gt;333&lt;/td&gt;
              &lt;/tr&gt;
              &lt;tr class="table-success" id="message-3" style="display:none"&gt;
                  &lt;td colspan="3" nowrap&gt;44444444444444444444444444444444444444444444444444444444444444444444444444444444444444444444444444444444444444444444444444444444444444444
                      &lt;br/&gt;44444444444444444444
                      &lt;br/&gt;444444444
                      &lt;br/&gt;4444444444444444444
                      &lt;br/&gt;4444444444444
                      &lt;br/&gt;444444444444444444
                      &lt;br/&gt;44444444444444444444444444444414
                      &lt;br/&gt;444444444444444444444444444444444444
                      &lt;br/&gt;44444444444444444444444444444444444
                      &lt;br/&gt;44444444444444444444444444444444444
                      &lt;br/&gt;44444444444444
                      &lt;br/&gt;44444444444
                      &lt;br/&gt;44444444
                      &lt;br/&gt;4444444444
                      &lt;br/&gt;444&lt;/td&gt;
              &lt;/tr&gt;
          &lt;/tbody&gt;
      &lt;/table&gt;
      &lt;nav aria-label="Pagination"&gt;
          &lt;ul class="pagination justify-content-center font-weight-medium"&gt;
              &lt;li id="button-previous-page" class="page-item" value="1" style="cursor: pointer"&gt;&lt;a class="page-link svg-icon" aria-label="Previous Page" title="Previous Page" rel="tooltip"&gt;&lt;span
          aria-hidden="true" data-feather="chevrons-left"&gt;&amp;lt;&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
              &lt;li id="button-next-page" class="page-item" value="2" style="cursor: pointer"&gt;&lt;a class="page-link svg-icon" aria-label="Next Page" title="Next Page" rel="tooltip"&gt;&lt;span aria-hidden="true" data-feather="chevrons-right"&gt;&amp;gt;&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
          &lt;/ul&gt;
      &lt;/nav&gt;
  &lt;/div&gt;
  
  &lt;script src="https://code.jquery.com/jquery-3.4.1.slim.min.js"&gt;&lt;/script&gt;
  &lt;script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js"&gt;&lt;/script&gt;
  &lt;script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"&gt;&lt;/script&gt;</code></pre>
  </div>
  </div>
  </p>