为什么粘性标头不平滑？

时间：2019-03-01 09:25:10

标签： javascript jquery

有一个表在滚动时带有粘性标题。一切正常，但由于某种原因，滚动时会出现此标题。在移动设备上，这非常引人注目....................................... ...........

translate3d(0px, 0px, 0px)-使用

willChange: transform, opacity, scroll-position-滚动使用

在这种情况下如何实现平滑度？

示例，请

$(function() {
  $('table').each(function() {
    if ($(this).find('thead').length > 0 && $(this).find('th').length > 0) {
      // Clone <thead>
      var $w = $(window),
        $t = $(this),
        $thead = $t.find('thead').clone(),
        $col = $t.find('thead, tbody').clone();

      // Add class, remove margins, reset width and wrap table
      $t
        .addClass('sticky-enabled')
        .css({
          margin: 0,
          width: '100%'
        }).wrap('<div class="sticky-wrap" />');

      if ($t.hasClass('overflow-y')) $t.removeClass('overflow-y').parent().addClass('overflow-y');

      // Create new sticky table head (basic)
      $t.after('<table class="sticky-thead" />');

      // If <tbody> contains <th>, then we create sticky column and intersect (advanced)
      if ($t.find('tbody th').length > 0) {
        $t.after('<table class="sticky-col" /><table class="sticky-intersect" />');
      }

      // Create shorthand for things
      var $stickyHead = $(this).siblings('.sticky-thead'),
        $stickyCol = $(this).siblings('.sticky-col'),
        $stickyInsct = $(this).siblings('.sticky-intersect'),
        $stickyWrap = $(this).parent('.sticky-wrap');

      $stickyHead.append($thead);

      $stickyCol
        .append($col)
        .find('thead th:gt(0)').remove()
        .end()
        .find('tbody td').remove();

      $stickyInsct.html('<thead><tr><th>' + $t.find('thead th:first-child').html() + '</th></tr></thead>');

      // Set widths
      var setWidths = function() {
          $t
            .find('thead th').each(function(i) {
              $stickyHead.find('th').eq(i).width($(this).width());
            })
            .end()
            .find('tr').each(function(i) {
              $stickyCol.find('tr').eq(i).height($(this).height());
            });

          // Set width of sticky table head
          $stickyHead.width($t.width());

          // Set width of sticky table col
          $stickyCol.find('th').add($stickyInsct.find('th')).width($t.find('thead th').width())
        },
        repositionStickyHead = function() {
          // Return value of calculated allowance
          var allowance = calcAllowance();

          // Check if wrapper parent is overflowing along the y-axis
          if ($t.height() > $stickyWrap.height()) {
            // If it is overflowing (advanced layout)
            // Position sticky header based on wrapper scrollTop()
            if ($stickyWrap.scrollTop() > 0) {
              // When top of wrapping parent is out of view
              var ss = $stickyWrap.scrollTop();
              $stickyHead.add($stickyInsct).css({
                opacity: 1,
                transform: 'translate3d(0px,' + ss + 'px' + ', 0px)',
                willChange: 'transform, opacity, scroll-position'
              });
            } else {
              // When top of wrapping parent is in view
              $stickyHead.add($stickyInsct).css({
                opacity: 0,
                transform: 'translate3d(0px,' + 0 + ', 0px)',
                willChange: 'auto'
              });
            }
          } else {
            // If it is not overflowing (basic layout)
            // Position sticky header based on viewport scrollTop
            if ($w.scrollTop() > $t.offset().top && $w.scrollTop() < $t.offset().top + $t.outerHeight() - allowance) {
              // When top of viewport is in the table itself
              var abcd = window.pageYOffset - $t.offset().top;
              $stickyHead.add($stickyInsct).css({
                opacity: 1,
                transform: 'translate3d(0px,' + abcd + 'px' + ', 0px)',
                willChange: 'transform, opacity, scroll-position'
              });
            } else {
              // When top of viewport is above or below table
              $stickyHead.add($stickyInsct).css({
                opacity: 0,
                transform: 'translate3d(0px,' + 0 + ', 0px)',
                willChange: 'auto'
              });
            }
          }
        },
        repositionStickyCol = function() {
          if ($stickyWrap.scrollLeft() > 0) {
            // When left of wrapping parent is out of view
            $stickyCol.add($stickyInsct).css({
              opacity: 1,
              left: $stickyWrap.scrollLeft()
            });
          } else {
            // When left of wrapping parent is in view
            $stickyCol
              .css({
                opacity: 0
              })
              .add($stickyInsct).css({
                left: 0
              });
          }
        },
        calcAllowance = function() {
          var a = 0;
          // Calculate allowance
          $t.find('tbody tr:lt(3)').each(function() {
            a += $(this).height();
          });

          // Set fail safe limit (last three row might be too tall)
          // Set arbitrary limit at 0.25 of viewport height, or you can use an arbitrary pixel value
          if (a > $w.height() * 0.25) {
            a = $w.height() * 0.25;
          }

          // Add the height of sticky header
          a += $stickyHead.height();
          return a;
        };

      setWidths();

      $t.parent('.sticky-wrap').on('scroll', function() {
        repositionStickyHead();
        repositionStickyCol();
      });

      $w.on('load', setWidths);
      $w.on('resize', function() {
        setWidths();
        repositionStickyHead();
        repositionStickyCol();
      });
      $w.on('scroll', repositionStickyHead);
    }
  });
});
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
main,
nav,
section,
summary {
  display: block;
}

audio,
canvas,
video {
  display: inline-block;
}

audio:not([controls]) {
  display: none;
  height: 0;
}

[hidden] {
  display: none;
}

html {
  font-family: sans-serif;
  -ms-text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
}

a:focus {
  outline: thin dotted;
}

a:active,
a:hover {
  outline: 0;
}

h1 {
  font-size: 2em;
  margin: 0.67em 0;
}

abbr[title] {
  border-bottom: 1px dotted;
}

b,
strong {
  font-weight: bold;
}

dfn {
  font-style: italic;
}

hr {
  -moz-box-sizing: content-box;
  box-sizing: content-box;
  height: 0;
}

mark {
  background: #ff0;
  color: #000;
}

code,
kbd,
pre,
samp {
  font-family: monospace, serif;
  font-size: 1em;
}

pre {
  white-space: pre-wrap;
}

q {
  quotes: "\201C" "\201D" "\2018" "\2019";
}

small {
  font-size: 80%;
}

sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}

sup {
  top: -0.5em;
}

sub {
  bottom: -0.25em;
}

img {
  border: 0;
}

svg:not(:root) {
  overflow: hidden;
}

figure {
  margin: 0;
}

fieldset {
  border: 1px solid #c0c0c0;
  margin: 0 2px;
  padding: 0.35em 0.625em 0.75em;
}

legend {
  border: 0;
  padding: 0;
}

button,
input,
select,
textarea {
  font-family: inherit;
  font-size: 100%;
  margin: 0;
}

button,
input {
  line-height: normal;
}

button,
select {
  text-transform: none;
}

button,
html input[type="button"],
input[type="reset"],
input[type="submit"] {
  -webkit-appearance: button;
  cursor: pointer;
}

button[disabled],
html input[disabled] {
  cursor: default;
}

input[type="checkbox"],
input[type="radio"] {
  box-sizing: border-box;
  padding: 0;
}

input[type="search"] {
  -webkit-appearance: textfield;
  -moz-box-sizing: content-box;
  -webkit-box-sizing: content-box;
  box-sizing: content-box;
}

input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-decoration {
  -webkit-appearance: none;
}

button::-moz-focus-inner,
input::-moz-focus-inner {
  border: 0;
  padding: 0;
}

textarea {
  overflow: auto;
  vertical-align: top;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
}

*,
*:after,
*:before {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

body {
  font-family: 'Lato', Arial, sans-serif;
  color: #7c8d87;
  background: #f8f8f8;
}

a {
  color: #31bc86;
  text-decoration: none;
}

a:hover,
a:focus {
  color: #7c8d87;
}

.container>header {
  margin: 0 auto;
  padding: 2em;
  text-align: center;
  background: rgba(0, 0, 0, 0.01);
}

.container>header h1 {
  font-size: 2.625em;
  line-height: 1.3;
  margin: 0;
  font-weight: 300;
}

.container>header span {
  display: block;
  font-size: 60%;
  opacity: 0.7;
  padding: 0 0 0.6em 0.1em;
}


/* To Navigation Style */

.codrops-top {
  background: #fff;
  background: rgba(255, 255, 255, 0.6);
  text-transform: uppercase;
  width: 100%;
  font-size: 0.69em;
  line-height: 2.2;
}

.codrops-top a {
  text-decoration: none;
  padding: 0 1em;
  letter-spacing: 0.1em;
  display: inline-block;
}

.codrops-top a:hover {
  background: rgba(255, 255, 255, 0.95);
}

.codrops-top span.right {
  float: right;
}

.codrops-top span.right a {
  float: left;
  display: block;
}

.codrops-icon:before {
  font-family: 'codropsicons';
  margin: 0 4px;
  speak: none;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;
  -webkit-font-smoothing: antialiased;
}

.codrops-icon-drop:before {
  content: "\e001";
}

.codrops-icon-prev:before {
  content: "\e004";
}


/* Demo Buttons Style */

.codrops-demos {
  padding-top: 1em;
  font-size: 0.8em;
}

.codrops-demos a {
  display: inline-block;
  margin: 0.5em;
  padding: 0.7em 1.1em;
  outline: none;
  border: 2px solid #31bc86;
  text-decoration: none;
  text-transform: uppercase;
  letter-spacing: 1px;
  font-weight: 700;
}

.codrops-demos a:hover,
.codrops-demos a.current-demo,
.codrops-demos a.current-demo:hover {
  border-color: #7c8d87;
  color: #7c8d87;
}

.related {
  text-align: center;
  font-size: 1.5em;
  padding-bottom: 3em;
}

@media screen and (max-width: 25em) {
  .codrops-icon span {
    display: none;
  }
}

.component {
  line-height: 1.5em;
  margin: 0 auto;
  padding: 2em 0 3em;
  width: 90%;
  max-width: 1000px;
  overflow: hidden;
}

.component .filler {
  font-family: "Blokk", Arial, sans-serif;
  color: #d3d3d3;
}

table {
  border-collapse: collapse;
  margin-bottom: 3em;
  width: 100%;
  background: #fff;
}

td,
th {
  padding: 0.75em 1.5em;
  text-align: left;
}

td.err {
  background-color: #e992b9;
  color: #fff;
  font-size: 0.75em;
  text-align: center;
  line-height: 1;
}

th {
  background-color: #31bc86;
  font-weight: bold;
  color: #fff;
  white-space: nowrap;
}

tbody th {
  background-color: #2ea879;
}

tbody tr:nth-child(2n-1) {
  background-color: #f5f5f5;
  transition: all .125s ease-in-out;
}

tbody tr:hover {
  background-color: rgba(129, 208, 177, .3);
}


/* For appearance */

.sticky-wrap {
  overflow-x: auto;
  overflow-y: hidden;
  position: relative;
  margin: 3em 0;
  width: 100%;
}

.sticky-wrap .sticky-thead,
.sticky-wrap .sticky-col,
.sticky-wrap .sticky-intersect {
  opacity: 0;
  position: absolute;
  top: 0;
  left: 0;
  transition: transform 0s ease;
  transform: translate3d(0px, 0px, 0px);
  z-index: 50;
  width: auto;
  /* Prevent table from stretching to full size */
  backface-visibility: hidden;
  perspective: 1000;
}

.sticky-wrap .sticky-thead {
  box-shadow: 0 0.25em 0.1em -0.1em rgba(0, 0, 0, .125);
  z-index: 100;
  width: 100%;
  /* Force stretch */
}

.sticky-wrap .sticky-intersect {
  opacity: 1;
  z-index: 150;
}

.sticky-wrap .sticky-intersect th {
  background-color: #666;
  color: #eee;
}

.sticky-wrap td,
.sticky-wrap th {
  box-sizing: border-box;
}


/* Not needed for sticky header/column functionality */

td.user-name {
  text-transform: capitalize;
}

.sticky-wrap.overflow-y {
  overflow-y: auto;
  max-height: 50vh;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container">
  <div class="component">
    <h2>Basic usage</h2>
    <p>This is a basic usage example. Scroll down to see the sticky table header in action. And of course, multiple instances are supported. Tables are pre-populated with random user data retrieved from the <a href="http://randomuser.me/" title="Random User Generator">Random User Generator</a>.</p>
    <table>
      <thead>
        <tr>
          <th>Name</th>
          <th>Email</th>
          <th>Phone</th>
          <th>Mobile</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td class="user-name">gary coleman</td>
          <td class="user-email">gary.coleman21@example.com</td>
          <td class="user-phone">(398)-332-5385</td>
          <td class="user-mobile">(888)-677-3719</td>
        </tr>
        <tr>
          <td class="user-name">rose parker</td>
          <td class="user-email">rose.parker16@example.com</td>
          <td class="user-phone">(293)-873-2247</td>
          <td class="user-mobile">(216)-889-4933</td>
        </tr>
        <tr>
          <td class="user-name">chloe nelson</td>
          <td class="user-email">chloe.nelson18@example.com</td>
          <td class="user-phone">(957)-213-3499</td>
          <td class="user-mobile">(207)-516-4474</td>
        </tr>
        <tr>
          <td class="user-name">eric bell</td>
          <td class="user-email">eric.bell16@example.com</td>
          <td class="user-phone">(897)-762-9782</td>
          <td class="user-mobile">(565)-627-3002</td>
        </tr>
        <tr>
          <td class="user-name">douglas hayes</td>
          <td class="user-email">douglas.hayes92@example.com</td>
          <td class="user-phone">(231)-391-6269</td>
          <td class="user-mobile">(790)-838-2130</td>
        </tr>
        <tr>
          <td class="user-name">cameron brown</td>
          <td class="user-email">cameron.brown32@example.com</td>
          <td class="user-phone">(204)-488-5204</td>
          <td class="user-mobile">(508)-463-6811</td>
        </tr>
        <tr>
          <td class="user-name">nevaeh diaz</td>
          <td class="user-email">nevaeh.diaz99@example.com</td>
          <td class="user-phone">(436)-578-2946</td>
          <td class="user-mobile">(906)-412-3302</td>
        </tr>
        <tr>
          <td class="user-name">kathy miller</td>
          <td class="user-email">kathy.miller62@example.com</td>
          <td class="user-phone">(724)-705-3555</td>
          <td class="user-mobile">(764)-841-2531</td>
        </tr>
        <tr>
          <td class="user-name">susan king</td>
          <td class="user-email">susan.king88@example.com</td>
          <td class="user-phone">(774)-205-7754</td>
          <td class="user-mobile">(639)-267-9728</td>
        </tr>
        <tr>
          <td class="user-name">jeffery ramirez</td>
          <td class="user-email">jeffery.ramirez83@example.com</td>
          <td class="user-phone">(723)-243-7706</td>
          <td class="user-mobile">(172)-597-3422</td>
        </tr>
        <tr>
          <td class="user-name">gary coleman</td>
          <td class="user-email">gary.coleman21@example.com</td>
          <td class="user-phone">(398)-332-5385</td>
          <td class="user-mobile">(888)-677-3719</td>
        </tr>
        <tr>
          <td class="user-name">rose parker</td>
          <td class="user-email">rose.parker16@example.com</td>
          <td class="user-phone">(293)-873-2247</td>
          <td class="user-mobile">(216)-889-4933</td>
        </tr>
        <tr>
          <td class="user-name">chloe nelson</td>
          <td class="user-email">chloe.nelson18@example.com</td>
          <td class="user-phone">(957)-213-3499</td>
          <td class="user-mobile">(207)-516-4474</td>
        </tr>
        <tr>
          <td class="user-name">eric bell</td>
          <td class="user-email">eric.bell16@example.com</td>
          <td class="user-phone">(897)-762-9782</td>
          <td class="user-mobile">(565)-627-3002</td>
        </tr>
        <tr>
          <td class="user-name">douglas hayes</td>
          <td class="user-email">douglas.hayes92@example.com</td>
          <td class="user-phone">(231)-391-6269</td>
          <td class="user-mobile">(790)-838-2130</td>
        </tr>
        <tr>
          <td class="user-name">cameron brown</td>
          <td class="user-email">cameron.brown32@example.com</td>
          <td class="user-phone">(204)-488-5204</td>
          <td class="user-mobile">(508)-463-6811</td>
        </tr>
        <tr>
          <td class="user-name">nevaeh diaz</td>
          <td class="user-email">nevaeh.diaz99@example.com</td>
          <td class="user-phone">(436)-578-2946</td>
          <td class="user-mobile">(906)-412-3302</td>
        </tr>
        <tr>
          <td class="user-name">kathy miller</td>
          <td class="user-email">kathy.miller62@example.com</td>
          <td class="user-phone">(724)-705-3555</td>
          <td class="user-mobile">(764)-841-2531</td>
        </tr>
        <tr>
          <td class="user-name">susan king</td>
          <td class="user-email">susan.king88@example.com</td>
          <td class="user-phone">(774)-205-7754</td>
          <td class="user-mobile">(639)-267-9728</td>
        </tr>
        <tr>
          <td class="user-name">jeffery ramirez</td>
          <td class="user-email">jeffery.ramirez83@example.com</td>
          <td class="user-phone">(723)-243-7706</td>
          <td class="user-mobile">(172)-597-3422</td>
        </tr>
        <tr>
          <td class="user-name">gary coleman</td>
          <td class="user-email">gary.coleman21@example.com</td>
          <td class="user-phone">(398)-332-5385</td>
          <td class="user-mobile">(888)-677-3719</td>
        </tr>
        <tr>
          <td class="user-name">rose parker</td>
          <td class="user-email">rose.parker16@example.com</td>
          <td class="user-phone">(293)-873-2247</td>
          <td class="user-mobile">(216)-889-4933</td>
        </tr>
        <tr>
          <td class="user-name">chloe nelson</td>
          <td class="user-email">chloe.nelson18@example.com</td>
          <td class="user-phone">(957)-213-3499</td>
          <td class="user-mobile">(207)-516-4474</td>
        </tr>
        <tr>
          <td class="user-name">eric bell</td>
          <td class="user-email">eric.bell16@example.com</td>
          <td class="user-phone">(897)-762-9782</td>
          <td class="user-mobile">(565)-627-3002</td>
        </tr>
        <tr>
          <td class="user-name">douglas hayes</td>
          <td class="user-email">douglas.hayes92@example.com</td>
          <td class="user-phone">(231)-391-6269</td>
          <td class="user-mobile">(790)-838-2130</td>
        </tr>
        <tr>
          <td class="user-name">cameron brown</td>
          <td class="user-email">cameron.brown32@example.com</td>
          <td class="user-phone">(204)-488-5204</td>
          <td class="user-mobile">(508)-463-6811</td>
        </tr>
        <tr>
          <td class="user-name">nevaeh diaz</td>
          <td class="user-email">nevaeh.diaz99@example.com</td>
          <td class="user-phone">(436)-578-2946</td>
          <td class="user-mobile">(906)-412-3302</td>
        </tr>
        <tr>
          <td class="user-name">kathy miller</td>
          <td class="user-email">kathy.miller62@example.com</td>
          <td class="user-phone">(724)-705-3555</td>
          <td class="user-mobile">(764)-841-2531</td>
        </tr>
        <tr>
          <td class="user-name">susan king</td>
          <td class="user-email">susan.king88@example.com</td>
          <td class="user-phone">(774)-205-7754</td>
          <td class="user-mobile">(639)-267-9728</td>
        </tr>
        <tr>
          <td class="user-name">jeffery ramirez</td>
          <td class="user-email">jeffery.ramirez83@example.com</td>
          <td class="user-phone">(723)-243-7706</td>
          <td class="user-mobile">(172)-597-3422</td>
        </tr>
      </tbody>
    </table>
    <p class="filler">Curabitur placerat, nulla ultricies a, convallis pellentesque, justo nec eros. Fusce condimentum ante. Proin dapibus, felis fermentum orci molestie turpis id nulla ac nunc. Nunc dictum accumsan et, eros.</p>
    <p class="filler">Duis non mi odio, sagittis lorem. Sed aliquet in, convallis turpis. Nullam semper id, eleifend congue. Proin vel mauris rhoncus ac, tincidunt rutrum molestie, nunc justo, hendrerit metus nonummy at, ligula. Donec libero malesuada enim quis massa.</p>
    <p class="filler">Phasellus hendrerit tellus felis mollis luctus. Aenean aliquet. Aliquam commodo id, bibendum nulla ut lacus. Aliquam ultricies odio, fermentum ut, neque. Sed mattis. Pellentesque tellus.</p>
    <p class="filler">Cum sociis natoque penatibus et massa. Integer convallis ligula bibendum vel, nibh. Etiam congue fringilla turpis. Nullam erat eu mauris.</p>
    <p class="filler">Pellentesque facilisis sodales. Aenean commodo odio fermentum leo mollis consectetuer. Curabitur lobortis quis, venenatis lorem eget tempus purus. Class aptent taciti sociosqu</p>
  </div>
</div>
<!-- /container -->

codepen上的相同代码。

1 个答案:

答案 0 :(得分：0)

使用CSS position: sticky而不是将JavaScript用于粘性函数，可以更快地渲染。是supported in most modern browsers。

body {
  font-family: 'Lato', Arial, sans-serif;
  color: #7c8d87;
  background: #f8f8f8;
}

    table {
  border-collapse: collapse;
  margin-bottom: 3em;
  width: 100%;
  background: #fff;
}

td,
th {
  padding: 0.75em 1.5em;
  text-align: left;
}

td.err {
  background-color: #e992b9;
  color: #fff;
  font-size: 0.75em;
  text-align: center;
  line-height: 1;
}

th {
  background-color: #31bc86;
  font-weight: bold;
  color: #fff;
  white-space: nowrap;
}

tbody th {
  background-color: #2ea879;
}

tbody tr:nth-child(2n-1) {
  background-color: #f5f5f5;
  transition: all .125s ease-in-out;
}

tbody tr:hover {
  background-color: rgba(129, 208, 177, .3);
}

/* Use sticky on th and not on thead because of browser bugs (see caniuse.com) */
thead th {
  position: sticky;
  top: 0;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container">
  <div class="component">
    <h2>Basic usage</h2>
    <p>This is a basic usage example. Scroll down to see the sticky table header in action. And of course, multiple instances are supported. Tables are pre-populated with random user data retrieved from the <a href="http://randomuser.me/" title="Random User Generator">Random User Generator</a>.</p>
    <table>
      <thead>
        <tr>
          <th>Name</th>
          <th>Email</th>
          <th>Phone</th>
          <th>Mobile</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td class="user-name">gary coleman</td>
          <td class="user-email">gary.coleman21@example.com</td>
          <td class="user-phone">(398)-332-5385</td>
          <td class="user-mobile">(888)-677-3719</td>
        </tr>
        <tr>
          <td class="user-name">rose parker</td>
          <td class="user-email">rose.parker16@example.com</td>
          <td class="user-phone">(293)-873-2247</td>
          <td class="user-mobile">(216)-889-4933</td>
        </tr>
        <tr>
          <td class="user-name">chloe nelson</td>
          <td class="user-email">chloe.nelson18@example.com</td>
          <td class="user-phone">(957)-213-3499</td>
          <td class="user-mobile">(207)-516-4474</td>
        </tr>
        <tr>
          <td class="user-name">eric bell</td>
          <td class="user-email">eric.bell16@example.com</td>
          <td class="user-phone">(897)-762-9782</td>
          <td class="user-mobile">(565)-627-3002</td>
        </tr>
        <tr>
          <td class="user-name">douglas hayes</td>
          <td class="user-email">douglas.hayes92@example.com</td>
          <td class="user-phone">(231)-391-6269</td>
          <td class="user-mobile">(790)-838-2130</td>
        </tr>
        <tr>
          <td class="user-name">cameron brown</td>
          <td class="user-email">cameron.brown32@example.com</td>
          <td class="user-phone">(204)-488-5204</td>
          <td class="user-mobile">(508)-463-6811</td>
        </tr>
      </tbody>
    </table>
    <p class="filler">Curabitur placerat, nulla ultricies a, convallis pellentesque, justo nec eros. Fusce condimentum ante. Proin dapibus, felis fermentum orci molestie turpis id nulla ac nunc. Nunc dictum accumsan et, eros.</p>
    <p class="filler">Duis non mi odio, sagittis lorem. Sed aliquet in, convallis turpis. Nullam semper id, eleifend congue. Proin vel mauris rhoncus ac, tincidunt rutrum molestie, nunc justo, hendrerit metus nonummy at, ligula. Donec libero malesuada enim quis massa.</p>
    <p class="filler">Phasellus hendrerit tellus felis mollis luctus. Aenean aliquet. Aliquam commodo id, bibendum nulla ut lacus. Aliquam ultricies odio, fermentum ut, neque. Sed mattis. Pellentesque tellus.</p>
    <p class="filler">Cum sociis natoque penatibus et massa. Integer convallis ligula bibendum vel, nibh. Etiam congue fringilla turpis. Nullam erat eu mauris.</p>
    <p class="filler">Pellentesque facilisis sodales. Aenean commodo odio fermentum leo mollis consectetuer. Curabitur lobortis quis, venenatis lorem eget tempus purus. Class aptent taciti sociosqu</p>
  </div>
</div>
<!-- /container -->

相关问题
最新问题