如何用jQuery平滑隐藏表格标题信息并调整滚动时表格标题的高度？

问题描述 投票：0回答：1

我正在开发一个网页，其中包含一个带有粘性标题的表格，特别是如下所示的部分：

const $tableContainer = $('.matrix-container');
const $table = $tableContainer.find('table');
const $priceDivs = $('.price');
const $thead = $table.find('thead');

$thead.css('height', 'auto');

// Capture the initial height after setting it to auto to ensure it's computed correctly
var initialHeaderHeight = $thead.height();

$(window).scroll(function() {
  const tableRect = $table[0].getBoundingClientRect();
  if (tableRect.top <= 0 && tableRect.bottom >= 0) {
    $priceDivs.hide(500);
    setTimeout(() => {
      $thead.css('height', initialHeaderHeight * 0.7); // Reduce 70% of the height
    }, 500);
  } else {
    $priceDivs.show(500);
    setTimeout(() => {
      $thead.css('height', initialHeaderHeight); // Restore to initial height
    }, 500);
  }
});
.matrix-container {
  position: relative;
  padding-top: 100px;
  /* To ensure the table is not at the top of the viewport initially */
}

table {
  width: 100%;
}

thead {
  background-color: #f9f9f9;
  position: sticky;
  top: 0;
  transition: height 1s ease-in-out;
}

.price {
  display: block;
  margin-bottom: 20px;
  background-color: #f0f0f0;
  padding: 10px;
  transition: opacity 1s ease-in-out;
}

.text {
  margin-top: 150px;
  margin-bottom: 150px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>

<body>
  <div class="matrix-container">
    <table>
      <thead>
        <tr>
          <th>
            Header 1
            <div class="price">Price</div>
            <div class="details">Details</div>
            <div class="button">
              <button>Clcik</button>
            </div>
          </th>
          <th>
            Header 2
            <div class="price">Price</div>
            <div class="details">Details</div>
            <div class="button">
              <button>Clcik</button>
            </div>
          </th>
          <th>
            Header 3
            <div class="price">Price</div>
            <div class="details">Details</div>
            <div class="button">
              <button>Clcik</button>
            </div>
          </th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>Data 1</td>
          <td>Data 2</td>
          <td>Data 3</td>
        </tr>
        <tr>
          <td>Data 1</td>
          <td>Data 2</td>
          <td>Data 3</td>
        </tr>
        <tr>
          <td>Data 1</td>
          <td>Data 2</td>
          <td>Data 3</td>
        </tr>
        <tr>
          <td>Data 1</td>
          <td>Data 2</td>
          <td>Data 3</td>
        </tr>
        <tr>
          <td>Data 1</td>
          <td>Data 2</td>
          <td>Data 3</td>
        </tr>
        <tr>
          <td>Data 1</td>
          <td>Data 2</td>
          <td>Data 3</td>
        </tr>
        <tr>
          <td>Data 1</td>
          <td>Data 2</td>
          <td>Data 3</td>
        </tr>
        <tr>
          <td>Data 1</td>
          <td>Data 2</td>
          <td>Data 3</td>
        </tr>
        <tr>
          <td>Data 1</td>
          <td>Data 2</td>
          <td>Data 3</td>
        </tr>
        <tr>
          <td>Data 1</td>
          <td>Data 2</td>
          <td>Data 3</td>
        </tr>
        <tr>
          <td>Data 1</td>
          <td>Data 2</td>
          <td>Data 3</td>
        </tr>
        <tr>
          <td>Data 1</td>
          <td>Data 2</td>
          <td>Data 3</td>
        </tr>
        <tr>
          <td>Data 1</td>
          <td>Data 2</td>
          <td>Data 3</td>
        </tr>
        <tr>
          <td>Data 1</td>
          <td>Data 2</td>
          <td>Data 3</td>
        </tr>
        <tr>
          <td>Data 1</td>
          <td>Data 2</td>
          <td>Data 3</td>
        </tr>
        <tr>
          <td>Data 1</td>
          <td>Data 2</td>
          <td>Data 3</td>
        </tr>
        <tr>
          <td>Data 1</td>
          <td>Data 2</td>
          <td>Data 3</td>
        </tr>
        <tr>
          <td>Data 1</td>
          <td>Data 2</td>
          <td>Data 3</td>
        </tr>
        <tr>
          <td>Data 1</td>
          <td>Data 2</td>
          <td>Data 3</td>
        </tr>
        <tr>
          <td>Data 1</td>
          <td>Data 2</td>
          <td>Data 3</td>
        </tr>
        <tr>
          <td>Data 1</td>
          <td>Data 2</td>
          <td>Data 3</td>
        </tr>
        <tr>
          <td>Data 1</td>
          <td>Data 2</td>
          <td>Data 3</td>
        </tr>
        <tr>
          <td>Data 1</td>
          <td>Data 2</td>
          <td>Data 3</td>
        </tr>
        <!-- Add more rows as needed -->
      </tbody>
    </table>
  </div>
  <div class="text-container">
    <div class="text">
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sodales lorem libero, a egestas enim faucibus non. Nullam tincidunt hendrerit faucibus. Vestibulum laoreet nulla in odio bibendum, vel facilisis ligula mattis. Proin a neque ullamcorper, bibendum
      purus sit amet, vulputate elit. Curabitur hendrerit purus velit, varius luctus sem aliquam non. Aenean porttitor interdum orci, ac sodales lorem facilisis a. Etiam scelerisque nunc mauris, at gravida risus venenatis vel. Class aptent taciti sociosqu
      ad litora torquent per conubia nostra, per inceptos himenaeos. Etiam eget ligula pretium, iaculis nisi non, pretium risus. Duis eu accumsan erat. Aenean mollis ut dolor id tincidunt. Praesent in risus sit amet leo auctor venenatis. Etiam aliquam
      quis nisl eu mollis. Pellentesque non diam sed neque finibus sollicitudin sed non neque. Sed vitae augue libero. Sed eu feugiat eros. Aliquam elementum feugiat arcu sed mattis. Nunc vestibulum sem nibh, sodales consequat arcu luctus ac. Ut tortor
      turpis, ultrices quis pulvinar at, rutrum ut arcu. Integer dapibus erat ante, vitae laoreet est sagittis et. Sed feugiat scelerisque risus, a mattis justo placerat ac. Sed blandit lorem quis urna hendrerit, nec ultricies erat molestie. Vivamus tempor
      sapien quis lacus bibendum tempor. Mauris lacinia interdum scelerisque. Vivamus at elit quis urna aliquet gravida eget a dui. Aenean et pharetra nisi, eget euismod augue. Duis mauris leo, convallis pretium nulla vitae, finibus porttitor diam. Cras
      nisl massa, volutpat fringilla leo ac, dictum laoreet tortor. Donec rhoncus porta eleifend. Vivamus placerat tortor at ipsum volutpat, in mollis nulla facilisis. Aenean pharetra dui at convallis ultricies. Maecenas fringilla sit amet neque at facilisis.
      In blandit, turpis eu aliquam lobortis, arcu nisl tempor tortor, nec tristique odio diam sed velit. Fusce luctus lectus neque, ac hendrerit massa hendrerit ac. Aenean diam tortor, volutpat in sollicitudin faucibus, congue ut quam. Donec fringilla
      imperdiet eros vel auctor. Nulla quis risus placerat, commodo quam vitae, elementum lacus. Maecenas vulputate scelerisque diam, at ornare justo imperdiet non. In venenatis tortor eget ante semper, sed commodo purus posuere. Suspendisse lobortis
      dapibus massa, at malesuada diam vestibulum a. Nam nisl sem, consequat non risus ultricies, consectetur varius massa. In nec nulla eget erat rutrum consectetur. Sed molestie rhoncus lorem quis finibus. Phasellus aliquet leo nec enim luctus facilisis.
      Mauris sodales porta vehicula. Quisque pharetra, justo tincidunt pharetra aliquet, arcu mauris consequat turpis, ut commodo nisl odio nec urna. Sed faucibus elit a enim ullamcorper congue. Ut ultricies ante eu dolor facilisis aliquet. Sed odio ligula,
      tristique ac auctor et, commodo ut tortor. Curabitur pellentesque metus nec libero auctor, id vehicula dolor iaculis. Donec eu libero pellentesque, efficitur tellus ac, pretium ex. Nulla interdum nisi eu ipsum porta, vitae maximus nisl fringilla.
      Nullam lobortis elit arcu, quis vestibulum mauris auctor eget. Nunc blandit neque eget tellus faucibus laoreet. Suspendisse ullamcorper massa eu tortor tristique, non cursus urna volutpat. Phasellus eu interdum lacus. Mauris arcu risus, hendrerit
      vitae nisl at, rhoncus porta ante. Sed ac arcu quis velit consectetur placerat et a arcu. Phasellus rutrum metus sodales velit ultrices, eu varius tellus sollicitudin. Praesent tincidunt justo pellentesque urna sollicitudin porta. In accumsan magna
      id bibendum blandit. Aliquam fringilla felis in velit lobortis commodo et ac lectus. Vivamus eget ex a risus tempor consectetur. Phasellus molestie ligula lacus, ac imperdiet nulla fermentum non.
    </div>
    <div class="text">
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sodales lorem libero, a egestas enim faucibus non. Nullam tincidunt hendrerit faucibus. Vestibulum laoreet nulla in odio bibendum, vel facilisis ligula mattis. Proin a neque ullamcorper, bibendum
      purus sit amet, vulputate elit. Curabitur hendrerit purus velit, varius luctus sem aliquam non. Aenean porttitor interdum orci, ac sodales lorem facilisis a. Etiam scelerisque nunc mauris, at gravida risus venenatis vel. Class aptent taciti sociosqu
      ad litora torquent per conubia nostra, per inceptos himenaeos. Etiam eget ligula pretium, iaculis nisi non, pretium risus. Duis eu accumsan erat. Aenean mollis ut dolor id tincidunt. Praesent in risus sit amet leo auctor venenatis. Etiam aliquam
      quis nisl eu mollis. Pellentesque non diam sed neque finibus sollicitudin sed non neque. Sed vitae augue libero. Sed eu feugiat eros. Aliquam elementum feugiat arcu sed mattis. Nunc vestibulum sem nibh, sodales consequat arcu luctus ac. Ut tortor
      turpis, ultrices quis pulvinar at, rutrum ut arcu. Integer dapibus erat ante, vitae laoreet est sagittis et. Sed feugiat scelerisque risus, a mattis justo placerat ac. Sed blandit lorem quis urna hendrerit, nec ultricies erat molestie. Vivamus tempor
      sapien quis lacus bibendum tempor. Mauris lacinia interdum scelerisque. Vivamus at elit quis urna aliquet gravida eget a dui. Aenean et pharetra nisi, eget euismod augue. Duis mauris leo, convallis pretium nulla vitae, finibus porttitor diam. Cras
      nisl massa, volutpat fringilla leo ac, dictum laoreet tortor. Donec rhoncus porta eleifend. Vivamus placerat tortor at ipsum volutpat, in mollis nulla facilisis. Aenean pharetra dui at convallis ultricies. Maecenas fringilla sit amet neque at facilisis.
      In blandit, turpis eu aliquam lobortis, arcu nisl tempor tortor, nec tristique odio diam sed velit. Fusce luctus lectus neque, ac hendrerit massa hendrerit ac. Aenean diam tortor, volutpat in sollicitudin faucibus, congue ut quam. Donec fringilla
      imperdiet eros vel auctor. Nulla quis risus placerat, commodo quam vitae, elementum lacus. Maecenas vulputate scelerisque diam, at ornare justo imperdiet non. In venenatis tortor eget ante semper, sed commodo purus posuere. Suspendisse lobortis
      dapibus massa, at malesuada diam vestibulum a. Nam nisl sem, consequat non risus ultricies, consectetur varius massa. In nec nulla eget erat rutrum consectetur. Sed molestie rhoncus lorem quis finibus. Phasellus aliquet leo nec enim luctus facilisis.
      Mauris sodales porta vehicula. Quisque pharetra, justo tincidunt pharetra aliquet, arcu mauris consequat turpis, ut commodo nisl odio nec urna. Sed faucibus elit a enim ullamcorper congue. Ut ultricies ante eu dolor facilisis aliquet. Sed odio ligula,
      tristique ac auctor et, commodo ut tortor. Curabitur pellentesque metus nec libero auctor, id vehicula dolor iaculis. Donec eu libero pellentesque, efficitur tellus ac, pretium ex. Nulla interdum nisi eu ipsum porta, vitae maximus nisl fringilla.
      Nullam lobortis elit arcu, quis vestibulum mauris auctor eget. Nunc blandit neque eget tellus faucibus laoreet. Suspendisse ullamcorper massa eu tortor tristique, non cursus urna volutpat. Phasellus eu interdum lacus. Mauris arcu risus, hendrerit
      vitae nisl at, rhoncus porta ante. Sed ac arcu quis velit consectetur placerat et a arcu. Phasellus rutrum metus sodales velit ultrices, eu varius tellus sollicitudin. Praesent tincidunt justo pellentesque urna sollicitudin porta. In accumsan magna
      id bibendum blandit. Aliquam fringilla felis in velit lobortis commodo et ac lectus. Vivamus eget ex a risus tempor consectetur. Phasellus molestie ligula lacus, ac imperdiet nulla fermentum non.
    </div>
    <div class="text">
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sodales lorem libero, a egestas enim faucibus non. Nullam tincidunt hendrerit faucibus. Vestibulum laoreet nulla in odio bibendum, vel facilisis ligula mattis. Proin a neque ullamcorper, bibendum
      purus sit amet, vulputate elit. Curabitur hendrerit purus velit, varius luctus sem aliquam non. Aenean porttitor interdum orci, ac sodales lorem facilisis a. Etiam scelerisque nunc mauris, at gravida risus venenatis vel. Class aptent taciti sociosqu
      ad litora torquent per conubia nostra, per inceptos himenaeos. Etiam eget ligula pretium, iaculis nisi non, pretium risus. Duis eu accumsan erat. Aenean mollis ut dolor id tincidunt. Praesent in risus sit amet leo auctor venenatis. Etiam aliquam
      quis nisl eu mollis. Pellentesque non diam sed neque finibus sollicitudin sed non neque. Sed vitae augue libero. Sed eu feugiat eros. Aliquam elementum feugiat arcu sed mattis. Nunc vestibulum sem nibh, sodales consequat arcu luctus ac. Ut tortor
      turpis, ultrices quis pulvinar at, rutrum ut arcu. Integer dapibus erat ante, vitae laoreet est sagittis et. Sed feugiat scelerisque risus, a mattis justo placerat ac. Sed blandit lorem quis urna hendrerit, nec ultricies erat molestie. Vivamus tempor
      sapien quis lacus bibendum tempor. Mauris lacinia interdum scelerisque. Vivamus at elit quis urna aliquet gravida eget a dui. Aenean et pharetra nisi, eget euismod augue. Duis mauris leo, convallis pretium nulla vitae, finibus porttitor diam. Cras
      nisl massa, volutpat fringilla leo ac, dictum laoreet tortor. Donec rhoncus porta eleifend. Vivamus placerat tortor at ipsum volutpat, in mollis nulla facilisis. Aenean pharetra dui at convallis ultricies. Maecenas fringilla sit amet neque at facilisis.
      In blandit, turpis eu aliquam lobortis, arcu nisl tempor tortor, nec tristique odio diam sed velit. Fusce luctus lectus neque, ac hendrerit massa hendrerit ac. Aenean diam tortor, volutpat in sollicitudin faucibus, congue ut quam. Donec fringilla
      imperdiet eros vel auctor. Nulla quis risus placerat, commodo quam vitae, elementum lacus. Maecenas vulputate scelerisque diam, at ornare justo imperdiet non. In venenatis tortor eget ante semper, sed commodo purus posuere. Suspendisse lobortis
      dapibus massa, at malesuada diam vestibulum a. Nam nisl sem, consequat non risus ultricies, consectetur varius massa. In nec nulla eget erat rutrum consectetur. Sed molestie rhoncus lorem quis finibus. Phasellus aliquet leo nec enim luctus facilisis.
      Mauris sodales porta vehicula. Quisque pharetra, justo tincidunt pharetra aliquet, arcu mauris consequat turpis, ut commodo nisl odio nec urna. Sed faucibus elit a enim ullamcorper congue. Ut ultricies ante eu dolor facilisis aliquet. Sed odio ligula,
      tristique ac auctor et, commodo ut tortor. Curabitur pellentesque metus nec libero auctor, id vehicula dolor iaculis. Donec eu libero pellentesque, efficitur tellus ac, pretium ex. Nulla interdum nisi eu ipsum porta, vitae maximus nisl fringilla.
      Nullam lobortis elit arcu, quis vestibulum mauris auctor eget. Nunc blandit neque eget tellus faucibus laoreet. Suspendisse ullamcorper massa eu tortor tristique, non cursus urna volutpat. Phasellus eu interdum lacus. Mauris arcu risus, hendrerit
      vitae nisl at, rhoncus porta ante. Sed ac arcu quis velit consectetur placerat et a arcu. Phasellus rutrum metus sodales velit ultrices, eu varius tellus sollicitudin. Praesent tincidunt justo pellentesque urna sollicitudin porta. In accumsan magna
      id bibendum blandit. Aliquam fringilla felis in velit lobortis commodo et ac lectus. Vivamus eget ex a risus tempor consectetur. Phasellus molestie ligula lacus, ac imperdiet nulla fermentum non.
    </div>
    <div class="text">
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sodales lorem libero, a egestas enim faucibus non. Nullam tincidunt hendrerit faucibus. Vestibulum laoreet nulla in odio bibendum, vel facilisis ligula mattis. Proin a neque ullamcorper, bibendum
      purus sit amet, vulputate elit. Curabitur hendrerit purus velit, varius luctus sem aliquam non. Aenean porttitor interdum orci, ac sodales lorem facilisis a. Etiam scelerisque nunc mauris, at gravida risus venenatis vel. Class aptent taciti sociosqu
      ad litora torquent per conubia nostra, per inceptos himenaeos. Etiam eget ligula pretium, iaculis nisi non, pretium risus. Duis eu accumsan erat. Aenean mollis ut dolor id tincidunt. Praesent in risus sit amet leo auctor venenatis. Etiam aliquam
      quis nisl eu mollis. Pellentesque non diam sed neque finibus sollicitudin sed non neque. Sed vitae augue libero. Sed eu feugiat eros. Aliquam elementum feugiat arcu sed mattis. Nunc vestibulum sem nibh, sodales consequat arcu luctus ac. Ut tortor
      turpis, ultrices quis pulvinar at, rutrum ut arcu. Integer dapibus erat ante, vitae laoreet est sagittis et. Sed feugiat scelerisque risus, a mattis justo placerat ac. Sed blandit lorem quis urna hendrerit, nec ultricies erat molestie. Vivamus tempor
      sapien quis lacus bibendum tempor. Mauris lacinia interdum scelerisque. Vivamus at elit quis urna aliquet gravida eget a dui. Aenean et pharetra nisi, eget euismod augue. Duis mauris leo, convallis pretium nulla vitae, finibus porttitor diam. Cras
      nisl massa, volutpat fringilla leo ac, dictum laoreet tortor. Donec rhoncus porta eleifend. Vivamus placerat tortor at ipsum volutpat, in mollis nulla facilisis. Aenean pharetra dui at convallis ultricies. Maecenas fringilla sit amet neque at facilisis.
      In blandit, turpis eu aliquam lobortis, arcu nisl tempor tortor, nec tristique odio diam sed velit. Fusce luctus lectus neque, ac hendrerit massa hendrerit ac. Aenean diam tortor, volutpat in sollicitudin faucibus, congue ut quam. Donec fringilla
      imperdiet eros vel auctor. Nulla quis risus placerat, commodo quam vitae, elementum lacus. Maecenas vulputate scelerisque diam, at ornare justo imperdiet non. In venenatis tortor eget ante semper, sed commodo purus posuere. Suspendisse lobortis
      dapibus massa, at malesuada diam vestibulum a. Nam nisl sem, consequat non risus ultricies, consectetur varius massa. In nec nulla eget erat rutrum consectetur. Sed molestie rhoncus lorem quis finibus. Phasellus aliquet leo nec enim luctus facilisis.
      Mauris sodales porta vehicula. Quisque pharetra, justo tincidunt pharetra aliquet, arcu mauris consequat turpis, ut commodo nisl odio nec urna. Sed faucibus elit a enim ullamcorper congue. Ut ultricies ante eu dolor facilisis aliquet. Sed odio ligula,
      tristique ac auctor et, commodo ut tortor. Curabitur pellentesque metus nec libero auctor, id vehicula dolor iaculis. Donec eu libero pellentesque, efficitur tellus ac, pretium ex. Nulla interdum nisi eu ipsum porta, vitae maximus nisl fringilla.
      Nullam lobortis elit arcu, quis vestibulum mauris auctor eget. Nunc blandit neque eget tellus faucibus laoreet. Suspendisse ullamcorper massa eu tortor tristique, non cursus urna volutpat. Phasellus eu interdum lacus. Mauris arcu risus, hendrerit
      vitae nisl at, rhoncus porta ante. Sed ac arcu quis velit consectetur placerat et a arcu. Phasellus rutrum metus sodales velit ultrices, eu varius tellus sollicitudin. Praesent tincidunt justo pellentesque urna sollicitudin porta. In accumsan magna
      id bibendum blandit. Aliquam fringilla felis in velit lobortis commodo et ac lectus. Vivamus eget ex a risus tempor consectetur. Phasellus molestie ligula lacus, ac imperdiet nulla fermentum non.
    </div>
  </div>
</body>

</html>

在这个标题中，有一个 

price
div，当用户在表格上滚动时我想隐藏它。此外，我试图在滚动过程中减小标题的高度，以确保它不会遮盖下面太多的表格内容。

给定的代码正在运行，隐藏了价格 div 并降低了标题的高度。然而，这些变化并不顺利，我遇到了一个问题，当这些变化发生时，整个桌子都会摇晃或抖动，导致用户体验很差。我怎样才能让它变得平滑，以便 

price
平滑地隐藏并且标题高度尽可能平滑地降低？

我在此处添加了额外的文本 (Lorem Ipsum) 以展示页面结构。

提前致谢。

javascript html jquery css
1个回答
0
投票

您可以使表格的滚动行为

smooth
，例如：

  scroll-behavior: smooth;

您可以在这里测试：

const $tableContainer = $('.matrix-container');
const $table = $tableContainer.find('table');
const $priceDivs = $('.price');
const $thead = $table.find('thead');

$thead.css('height', 'auto');

// Capture the initial height after setting it to auto to ensure it's computed correctly
var initialHeaderHeight = $thead.height();

$(window).scroll(function() {
  const tableRect = $table[0].getBoundingClientRect();
  if (tableRect.top <= 0 && tableRect.bottom >= 0) {
    $priceDivs.hide(500);
    setTimeout(() => {
      $thead.css('height', initialHeaderHeight * 0.7); // Reduce 70% of the height
    }, 500);
  } else {
    $priceDivs.show(500);
    setTimeout(() => {
      $thead.css('height', initialHeaderHeight); // Restore to initial height
    }, 500);
  }
});
.matrix-container {
  position: relative;
  padding-top: 100px;
  /* To ensure the table is not at the top of the viewport initially */
}

table {
  width: 100%;
  scroll-behavior: smooth;
}

thead {
  background-color: #f9f9f9;
  position: sticky;
  top: 0;
  transition: height 1s ease-in-out;
}

.price {
  display: block;
  margin-bottom: 20px;
  background-color: #f0f0f0;
  padding: 10px;
  transition: opacity 1s ease-in-out;
}

.text {
  margin-top: 150px;
  margin-bottom: 150px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>

<body>
  <div class="matrix-container">
    <table>
      <thead>
        <tr>
          <th>
            Header 1
            <div class="price">Price</div>
            <div class="details">Details</div>
            <div class="button">
              <button>Clcik</button>
            </div>
          </th>
          <th>
            Header 2
            <div class="price">Price</div>
            <div class="details">Details</div>
            <div class="button">
              <button>Clcik</button>
            </div>
          </th>
          <th>
            Header 3
            <div class="price">Price</div>
            <div class="details">Details</div>
            <div class="button">
              <button>Clcik</button>
            </div>
          </th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>Data 1</td>
          <td>Data 2</td>
          <td>Data 3</td>
        </tr>
        <tr>
          <td>Data 1</td>
          <td>Data 2</td>
          <td>Data 3</td>
        </tr>
        <tr>
          <td>Data 1</td>
          <td>Data 2</td>
          <td>Data 3</td>
        </tr>
        <tr>
          <td>Data 1</td>
          <td>Data 2</td>
          <td>Data 3</td>
        </tr>
        <tr>
          <td>Data 1</td>
          <td>Data 2</td>
          <td>Data 3</td>
        </tr>
        <tr>
          <td>Data 1</td>
          <td>Data 2</td>
          <td>Data 3</td>
        </tr>
        <tr>
          <td>Data 1</td>
          <td>Data 2</td>
          <td>Data 3</td>
        </tr>
        <tr>
          <td>Data 1</td>
          <td>Data 2</td>
          <td>Data 3</td>
        </tr>
        <tr>
          <td>Data 1</td>
          <td>Data 2</td>
          <td>Data 3</td>
        </tr>
        <tr>
          <td>Data 1</td>
          <td>Data 2</td>
          <td>Data 3</td>
        </tr>
        <tr>
          <td>Data 1</td>
          <td>Data 2</td>
          <td>Data 3</td>
        </tr>
        <tr>
          <td>Data 1</td>
          <td>Data 2</td>
          <td>Data 3</td>
        </tr>
        <tr>
          <td>Data 1</td>
          <td>Data 2</td>
          <td>Data 3</td>
        </tr>
        <tr>
          <td>Data 1</td>
          <td>Data 2</td>
          <td>Data 3</td>
        </tr>
        <tr>
          <td>Data 1</td>
          <td>Data 2</td>
          <td>Data 3</td>
        </tr>
        <tr>
          <td>Data 1</td>
          <td>Data 2</td>
          <td>Data 3</td>
        </tr>
        <tr>
          <td>Data 1</td>
          <td>Data 2</td>
          <td>Data 3</td>
        </tr>
        <tr>
          <td>Data 1</td>
          <td>Data 2</td>
          <td>Data 3</td>
        </tr>
        <tr>
          <td>Data 1</td>
          <td>Data 2</td>
          <td>Data 3</td>
        </tr>
        <tr>
          <td>Data 1</td>
          <td>Data 2</td>
          <td>Data 3</td>
        </tr>
        <tr>
          <td>Data 1</td>
          <td>Data 2</td>
          <td>Data 3</td>
        </tr>
        <tr>
          <td>Data 1</td>
          <td>Data 2</td>
          <td>Data 3</td>
        </tr>
        <tr>
          <td>Data 1</td>
          <td>Data 2</td>
          <td>Data 3</td>
        </tr>
        <!-- Add more rows as needed -->
      </tbody>
    </table>
  </div>
  <div class="text-container">
    <div class="text">
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sodales lorem libero, a egestas enim faucibus non. Nullam tincidunt hendrerit faucibus. Vestibulum laoreet nulla in odio bibendum, vel facilisis ligula mattis. Proin a neque ullamcorper, bibendum
      purus sit amet, vulputate elit. Curabitur hendrerit purus velit, varius luctus sem aliquam non. Aenean porttitor interdum orci, ac sodales lorem facilisis a. Etiam scelerisque nunc mauris, at gravida risus venenatis vel. Class aptent taciti sociosqu
      ad litora torquent per conubia nostra, per inceptos himenaeos. Etiam eget ligula pretium, iaculis nisi non, pretium risus. Duis eu accumsan erat. Aenean mollis ut dolor id tincidunt. Praesent in risus sit amet leo auctor venenatis. Etiam aliquam
      quis nisl eu mollis. Pellentesque non diam sed neque finibus sollicitudin sed non neque. Sed vitae augue libero. Sed eu feugiat eros. Aliquam elementum feugiat arcu sed mattis. Nunc vestibulum sem nibh, sodales consequat arcu luctus ac. Ut tortor
      turpis, ultrices quis pulvinar at, rutrum ut arcu. Integer dapibus erat ante, vitae laoreet est sagittis et. Sed feugiat scelerisque risus, a mattis justo placerat ac. Sed blandit lorem quis urna hendrerit, nec ultricies erat molestie. Vivamus tempor
      sapien quis lacus bibendum tempor. Mauris lacinia interdum scelerisque. Vivamus at elit quis urna aliquet gravida eget a dui. Aenean et pharetra nisi, eget euismod augue. Duis mauris leo, convallis pretium nulla vitae, finibus porttitor diam. Cras
      nisl massa, volutpat fringilla leo ac, dictum laoreet tortor. Donec rhoncus porta eleifend. Vivamus placerat tortor at ipsum volutpat, in mollis nulla facilisis. Aenean pharetra dui at convallis ultricies. Maecenas fringilla sit amet neque at facilisis.
      In blandit, turpis eu aliquam lobortis, arcu nisl tempor tortor, nec tristique odio diam sed velit. Fusce luctus lectus neque, ac hendrerit massa hendrerit ac. Aenean diam tortor, volutpat in sollicitudin faucibus, congue ut quam. Donec fringilla
      imperdiet eros vel auctor. Nulla quis risus placerat, commodo quam vitae, elementum lacus. Maecenas vulputate scelerisque diam, at ornare justo imperdiet non. In venenatis tortor eget ante semper, sed commodo purus posuere. Suspendisse lobortis
      dapibus massa, at malesuada diam vestibulum a. Nam nisl sem, consequat non risus ultricies, consectetur varius massa. In nec nulla eget erat rutrum consectetur. Sed molestie rhoncus lorem quis finibus. Phasellus aliquet leo nec enim luctus facilisis.
      Mauris sodales porta vehicula. Quisque pharetra, justo tincidunt pharetra aliquet, arcu mauris consequat turpis, ut commodo nisl odio nec urna. Sed faucibus elit a enim ullamcorper congue. Ut ultricies ante eu dolor facilisis aliquet. Sed odio ligula,
      tristique ac auctor et, commodo ut tortor. Curabitur pellentesque metus nec libero auctor, id vehicula dolor iaculis. Donec eu libero pellentesque, efficitur tellus ac, pretium ex. Nulla interdum nisi eu ipsum porta, vitae maximus nisl fringilla.
      Nullam lobortis elit arcu, quis vestibulum mauris auctor eget. Nunc blandit neque eget tellus faucibus laoreet. Suspendisse ullamcorper massa eu tortor tristique, non cursus urna volutpat. Phasellus eu interdum lacus. Mauris arcu risus, hendrerit
      vitae nisl at, rhoncus porta ante. Sed ac arcu quis velit consectetur placerat et a arcu. Phasellus rutrum metus sodales velit ultrices, eu varius tellus sollicitudin. Praesent tincidunt justo pellentesque urna sollicitudin porta. In accumsan magna
      id bibendum blandit. Aliquam fringilla felis in velit lobortis commodo et ac lectus. Vivamus eget ex a risus tempor consectetur. Phasellus molestie ligula lacus, ac imperdiet nulla fermentum non.
    </div>
    <div class="text">
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sodales lorem libero, a egestas enim faucibus non. Nullam tincidunt hendrerit faucibus. Vestibulum laoreet nulla in odio bibendum, vel facilisis ligula mattis. Proin a neque ullamcorper, bibendum
      purus sit amet, vulputate elit. Curabitur hendrerit purus velit, varius luctus sem aliquam non. Aenean porttitor interdum orci, ac sodales lorem facilisis a. Etiam scelerisque nunc mauris, at gravida risus venenatis vel. Class aptent taciti sociosqu
      ad litora torquent per conubia nostra, per inceptos himenaeos. Etiam eget ligula pretium, iaculis nisi non, pretium risus. Duis eu accumsan erat. Aenean mollis ut dolor id tincidunt. Praesent in risus sit amet leo auctor venenatis. Etiam aliquam
      quis nisl eu mollis. Pellentesque non diam sed neque finibus sollicitudin sed non neque. Sed vitae augue libero. Sed eu feugiat eros. Aliquam elementum feugiat arcu sed mattis. Nunc vestibulum sem nibh, sodales consequat arcu luctus ac. Ut tortor
      turpis, ultrices quis pulvinar at, rutrum ut arcu. Integer dapibus erat ante, vitae laoreet est sagittis et. Sed feugiat scelerisque risus, a mattis justo placerat ac. Sed blandit lorem quis urna hendrerit, nec ultricies erat molestie. Vivamus tempor
      sapien quis lacus bibendum tempor. Mauris lacinia interdum scelerisque. Vivamus at elit quis urna aliquet gravida eget a dui. Aenean et pharetra nisi, eget euismod augue. Duis mauris leo, convallis pretium nulla vitae, finibus porttitor diam. Cras
      nisl massa, volutpat fringilla leo ac, dictum laoreet tortor. Donec rhoncus porta eleifend. Vivamus placerat tortor at ipsum volutpat, in mollis nulla facilisis. Aenean pharetra dui at convallis ultricies. Maecenas fringilla sit amet neque at facilisis.
      In blandit, turpis eu aliquam lobortis, arcu nisl tempor tortor, nec tristique odio diam sed velit. Fusce luctus lectus neque, ac hendrerit massa hendrerit ac. Aenean diam tortor, volutpat in sollicitudin faucibus, congue ut quam. Donec fringilla
      imperdiet eros vel auctor. Nulla quis risus placerat, commodo quam vitae, elementum lacus. Maecenas vulputate scelerisque diam, at ornare justo imperdiet non. In venenatis tortor eget ante semper, sed commodo purus posuere. Suspendisse lobortis
      dapibus massa, at malesuada diam vestibulum a. Nam nisl sem, consequat non risus ultricies, consectetur varius massa. In nec nulla eget erat rutrum consectetur. Sed molestie rhoncus lorem quis finibus. Phasellus aliquet leo nec enim luctus facilisis.
      Mauris sodales porta vehicula. Quisque pharetra, justo tincidunt pharetra aliquet, arcu mauris consequat turpis, ut commodo nisl odio nec urna. Sed faucibus elit a enim ullamcorper congue. Ut ultricies ante eu dolor facilisis aliquet. Sed odio ligula,
      tristique ac auctor et, commodo ut tortor. Curabitur pellentesque metus nec libero auctor, id vehicula dolor iaculis. Donec eu libero pellentesque, efficitur tellus ac, pretium ex. Nulla interdum nisi eu ipsum porta, vitae maximus nisl fringilla.
      Nullam lobortis elit arcu, quis vestibulum mauris auctor eget. Nunc blandit neque eget tellus faucibus laoreet. Suspendisse ullamcorper massa eu tortor tristique, non cursus urna volutpat. Phasellus eu interdum lacus. Mauris arcu risus, hendrerit
      vitae nisl at, rhoncus porta ante. Sed ac arcu quis velit consectetur placerat et a arcu. Phasellus rutrum metus sodales velit ultrices, eu varius tellus sollicitudin. Praesent tincidunt justo pellentesque urna sollicitudin porta. In accumsan magna
      id bibendum blandit. Aliquam fringilla felis in velit lobortis commodo et ac lectus. Vivamus eget ex a risus tempor consectetur. Phasellus molestie ligula lacus, ac imperdiet nulla fermentum non.
    </div>
    <div class="text">
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sodales lorem libero, a egestas enim faucibus non. Nullam tincidunt hendrerit faucibus. Vestibulum laoreet nulla in odio bibendum, vel facilisis ligula mattis. Proin a neque ullamcorper, bibendum
      purus sit amet, vulputate elit. Curabitur hendrerit purus velit, varius luctus sem aliquam non. Aenean porttitor interdum orci, ac sodales lorem facilisis a. Etiam scelerisque nunc mauris, at gravida risus venenatis vel. Class aptent taciti sociosqu
      ad litora torquent per conubia nostra, per inceptos himenaeos. Etiam eget ligula pretium, iaculis nisi non, pretium risus. Duis eu accumsan erat. Aenean mollis ut dolor id tincidunt. Praesent in risus sit amet leo auctor venenatis. Etiam aliquam
      quis nisl eu mollis. Pellentesque non diam sed neque finibus sollicitudin sed non neque. Sed vitae augue libero. Sed eu feugiat eros. Aliquam elementum feugiat arcu sed mattis. Nunc vestibulum sem nibh, sodales consequat arcu luctus ac. Ut tortor
      turpis, ultrices quis pulvinar at, rutrum ut arcu. Integer dapibus erat ante, vitae laoreet est sagittis et. Sed feugiat scelerisque risus, a mattis justo placerat ac. Sed blandit lorem quis urna hendrerit, nec ultricies erat molestie. Vivamus tempor
      sapien quis lacus bibendum tempor. Mauris lacinia interdum scelerisque. Vivamus at elit quis urna aliquet gravida eget a dui. Aenean et pharetra nisi, eget euismod augue. Duis mauris leo, convallis pretium nulla vitae, finibus porttitor diam. Cras
      nisl massa, volutpat fringilla leo ac, dictum laoreet tortor. Donec rhoncus porta eleifend. Vivamus placerat tortor at ipsum volutpat, in mollis nulla facilisis. Aenean pharetra dui at convallis ultricies. Maecenas fringilla sit amet neque at facilisis.
      In blandit, turpis eu aliquam lobortis, arcu nisl tempor tortor, nec tristique odio diam sed velit. Fusce luctus lectus neque, ac hendrerit massa hendrerit ac. Aenean diam tortor, volutpat in sollicitudin faucibus, congue ut quam. Donec fringilla
      imperdiet eros vel auctor. Nulla quis risus placerat, commodo quam vitae, elementum lacus. Maecenas vulputate scelerisque diam, at ornare justo imperdiet non. In venenatis tortor eget ante semper, sed commodo purus posuere. Suspendisse lobortis
      dapibus massa, at malesuada diam vestibulum a. Nam nisl sem, consequat non risus ultricies, consectetur varius massa. In nec nulla eget erat rutrum consectetur. Sed molestie rhoncus lorem quis finibus. Phasellus aliquet leo nec enim luctus facilisis.
      Mauris sodales porta vehicula. Quisque pharetra, justo tincidunt pharetra aliquet, arcu mauris consequat turpis, ut commodo nisl odio nec urna. Sed faucibus elit a enim ullamcorper congue. Ut ultricies ante eu dolor facilisis aliquet. Sed odio ligula,
      tristique ac auctor et, commodo ut tortor. Curabitur pellentesque metus nec libero auctor, id vehicula dolor iaculis. Donec eu libero pellentesque, efficitur tellus ac, pretium ex. Nulla interdum nisi eu ipsum porta, vitae maximus nisl fringilla.
      Nullam lobortis elit arcu, quis vestibulum mauris auctor eget. Nunc blandit neque eget tellus faucibus laoreet. Suspendisse ullamcorper massa eu tortor tristique, non cursus urna volutpat. Phasellus eu interdum lacus. Mauris arcu risus, hendrerit
      vitae nisl at, rhoncus porta ante. Sed ac arcu quis velit consectetur placerat et a arcu. Phasellus rutrum metus sodales velit ultrices, eu varius tellus sollicitudin. Praesent tincidunt justo pellentesque urna sollicitudin porta. In accumsan magna
      id bibendum blandit. Aliquam fringilla felis in velit lobortis commodo et ac lectus. Vivamus eget ex a risus tempor consectetur. Phasellus molestie ligula lacus, ac imperdiet nulla fermentum non.
    </div>
    <div class="text">
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sodales lorem libero, a egestas enim faucibus non. Nullam tincidunt hendrerit faucibus. Vestibulum laoreet nulla in odio bibendum, vel facilisis ligula mattis. Proin a neque ullamcorper, bibendum
      purus sit amet, vulputate elit. Curabitur hendrerit purus velit, varius luctus sem aliquam non. Aenean porttitor interdum orci, ac sodales lorem facilisis a. Etiam scelerisque nunc mauris, at gravida risus venenatis vel. Class aptent taciti sociosqu
      ad litora torquent per conubia nostra, per inceptos himenaeos. Etiam eget ligula pretium, iaculis nisi non, pretium risus. Duis eu accumsan erat. Aenean mollis ut dolor id tincidunt. Praesent in risus sit amet leo auctor venenatis. Etiam aliquam
      quis nisl eu mollis. Pellentesque non diam sed neque finibus sollicitudin sed non neque. Sed vitae augue libero. Sed eu feugiat eros. Aliquam elementum feugiat arcu sed mattis. Nunc vestibulum sem nibh, sodales consequat arcu luctus ac. Ut tortor
      turpis, ultrices quis pulvinar at, rutrum ut arcu. Integer dapibus erat ante, vitae laoreet est sagittis et. Sed feugiat scelerisque risus, a mattis justo placerat ac. Sed blandit lorem quis urna hendrerit, nec ultricies erat molestie. Vivamus tempor
      sapien quis lacus bibendum tempor. Mauris lacinia interdum scelerisque. Vivamus at elit quis urna aliquet gravida eget a dui. Aenean et pharetra nisi, eget euismod augue. Duis mauris leo, convallis pretium nulla vitae, finibus porttitor diam. Cras
      nisl massa, volutpat fringilla leo ac, dictum laoreet tortor. Donec rhoncus porta eleifend. Vivamus placerat tortor at ipsum volutpat, in mollis nulla facilisis. Aenean pharetra dui at convallis ultricies. Maecenas fringilla sit amet neque at facilisis.
      In blandit, turpis eu aliquam lobortis, arcu nisl tempor tortor, nec tristique odio diam sed velit. Fusce luctus lectus neque, ac hendrerit massa hendrerit ac. Aenean diam tortor, volutpat in sollicitudin faucibus, congue ut quam. Donec fringilla
      imperdiet eros vel auctor. Nulla quis risus placerat, commodo quam vitae, elementum lacus. Maecenas vulputate scelerisque diam, at ornare justo imperdiet non. In venenatis tortor eget ante semper, sed commodo purus posuere. Suspendisse lobortis
      dapibus massa, at malesuada diam vestibulum a. Nam nisl sem, consequat non risus ultricies, consectetur varius massa. In nec nulla eget erat rutrum consectetur. Sed molestie rhoncus lorem quis finibus. Phasellus aliquet leo nec enim luctus facilisis.
      Mauris sodales porta vehicula. Quisque pharetra, justo tincidunt pharetra aliquet, arcu mauris consequat turpis, ut commodo nisl odio nec urna. Sed faucibus elit a enim ullamcorper congue. Ut ultricies ante eu dolor facilisis aliquet. Sed odio ligula,
      tristique ac auctor et, commodo ut tortor. Curabitur pellentesque metus nec libero auctor, id vehicula dolor iaculis. Donec eu libero pellentesque, efficitur tellus ac, pretium ex. Nulla interdum nisi eu ipsum porta, vitae maximus nisl fringilla.
      Nullam lobortis elit arcu, quis vestibulum mauris auctor eget. Nunc blandit neque eget tellus faucibus laoreet. Suspendisse ullamcorper massa eu tortor tristique, non cursus urna volutpat. Phasellus eu interdum lacus. Mauris arcu risus, hendrerit
      vitae nisl at, rhoncus porta ante. Sed ac arcu quis velit consectetur placerat et a arcu. Phasellus rutrum metus sodales velit ultrices, eu varius tellus sollicitudin. Praesent tincidunt justo pellentesque urna sollicitudin porta. In accumsan magna
      id bibendum blandit. Aliquam fringilla felis in velit lobortis commodo et ac lectus. Vivamus eget ex a risus tempor consectetur. Phasellus molestie ligula lacus, ac imperdiet nulla fermentum non.
    </div>
  </div>
</body>

</html>

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.