jquery - 需要水平滚动固定表头及其行

Question

我有一个使用 div 创建的表。当我们向下滚动页面时，表格标题是固定的。由于表格太宽而无法放入视口。所以我可以选择水平滚动它。但是表头的问题。当我们向下滚动页面时，表头变得粘滞，因此它不能与表体一起水平滚动。是否有任何解决方法，以便我们可以水平滚动固定标题及其行？

我知道在 sto 上已经提出了几个类似的问题，我也关注了它们，但实际上没有一个对我有用。我的问题是不同的，因为它在您滚动页面时冻结表头而不是最初。

$(document).ready(function(){
  // Need to set the variable outside the function, otherwise the position will keep changing on scroll
  var head_pos = $(".customer_headings").offset().top;

  $(window).scroll(function(){
    if($(".customer_headings").length)
    {
      win_scroll = $(window).scrollTop();
      // Get the width of the container
      cont_width = $(".customers_table").width();

      if(win_scroll > head_pos)
      {
	    $(".customer_headings").css({"position":"fixed","top":"0px","width":cont_width, "z-index":"10"})
      }
      else
      {
        $(".customer_headings").css({"position":"static"})
      }
    }
  });
});

.customers_table_cont {
  border:1px solid red;
  width:1200px;
}

.customers_table {
  overflow-x:auto;
  overflow-y:hidden;
}

.customer_headings {
  background-color:#4c4c4c;
  color:#ffffff;
  white-space:nowrap;
  display:inline-block;
}

.customer_row {
  white-space:nowrap;
  display:inline-block;
}

.customer_column {
  width:250px;
  display:inline-block;
  padding:15px;
  overflow:hidden;
  text-overflow:ellipsis;
  display:inline-block;
  position:relative;
}

.customer_heading_dropdown {
  list-style-type:none;
  background:#ffffff;
  border-radius:0px 0px 5px 5px;
  box-shadow:0px 0px 10px #5a5a5a;
  display:block;
  padding:10px 5px;
  position:absolute;
  top:34px;
  left:18px;
  z-index:99999;
}

.customer_heading_dropdown li {
  border-radius:5px;
  color:#525252;
  cursor:pointer;
  font-weight:normal;
  line-height:14px;
  margin:5px;
  padding:5px 10px 5px 25px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

<h1>Customers Table</h1>

<div class="customers_table_cont">
  <div class="customers_table">
    <div class="customer_headings">
      <div class="customer_column">Company</div>
      <div class="customer_column">Name Heading is too long to fit here and shrinks</div>
      <div class="customer_column">Product
      <ul class="customer_heading_dropdown">
      <li>Remove Column</li>
      <li>Move Column Left</li>
      <li>Move Column Right</li>
      <li>Widen Column</li>
      <li>Narrow Column</li>
      </ul>
      </div>
      <div class="customer_column">Site</div>
      <div class="customer_column">Date Added</div>
      <div class="customer_column">Salesperson</div>
      <div class="customer_column">Quote</div>
      <div class="customer_column">Country</div>
      <div class="customer_column">Progress</div>
      <div class="customer_column">Estimate</div>
  </div>
    <div class="customer_row">
      <div class="customer_column">Dell</div>
      <div class="customer_column">Sachin Sharma</div>
      <div class="customer_column">Laptop</div>
      <div class="customer_column">dell.com</div>
      <div class="customer_column">31-03-2020</div>
      <div class="customer_column">David</div>
      <div class="customer_column">150</div>
      <div class="customer_column">India</div>
      <div class="customer_column">Good</div>
      <div class="customer_column">500</div>
    </div>
    <div class="customer_row">
      <div class="customer_column">Dell</div>
      <div class="customer_column">Sachin Sharma</div>
      <div class="customer_column">Laptop</div>
      <div class="customer_column">dell.com</div>
      <div class="customer_column">31-03-2020</div>
      <div class="customer_column">David</div>
      <div class="customer_column">150</div>
      <div class="customer_column">India</div>
      <div class="customer_column">Good</div>
      <div class="customer_column">500</div>
    </div>
    <div class="customer_row">
      <div class="customer_column">Dell</div>
      <div class="customer_column">Sachin Sharma</div>
      <div class="customer_column">Laptop</div>
      <div class="customer_column">dell.com</div>
      <div class="customer_column">31-03-2020</div>
      <div class="customer_column">David</div>
      <div class="customer_column">150</div>
      <div class="customer_column">India</div>
      <div class="customer_column">Good</div>
      <div class="customer_column">500</div>
    </div>
    <div class="customer_row">
      <div class="customer_column">Dell</div>
      <div class="customer_column">Sachin Sharma</div>
      <div class="customer_column">Laptop</div>
      <div class="customer_column">dell.com</div>
      <div class="customer_column">31-03-2020</div>
      <div class="customer_column">David</div>
      <div class="customer_column">150</div>
      <div class="customer_column">India</div>
      <div class="customer_column">Good</div>
      <div class="customer_column">500</div>
    </div>
    <div class="customer_row">
      <div class="customer_column">Dell</div>
      <div class="customer_column">Sachin Sharma</div>
      <div class="customer_column">Laptop</div>
      <div class="customer_column">dell.com</div>
      <div class="customer_column">31-03-2020</div>
      <div class="customer_column">David</div>
      <div class="customer_column">150</div>
      <div class="customer_column">India</div>
      <div class="customer_column">Good</div>
      <div class="customer_column">500</div>
    </div>
    <div class="customer_row">
      <div class="customer_column">Dell</div>
      <div class="customer_column">Sachin Sharma</div>
      <div class="customer_column">Laptop</div>
      <div class="customer_column">dell.com</div>
      <div class="customer_column">31-03-2020</div>
      <div class="customer_column">David</div>
      <div class="customer_column">150</div>
      <div class="customer_column">India</div>
      <div class="customer_column">Good</div>
      <div class="customer_column">500</div>
    </div>
    <div class="customer_row">
      <div class="customer_column">Dell</div>
      <div class="customer_column">Sachin Sharma</div>
      <div class="customer_column">Laptop</div>
      <div class="customer_column">dell.com</div>
      <div class="customer_column">31-03-2020</div>
      <div class="customer_column">David</div>
      <div class="customer_column">150</div>
      <div class="customer_column">India</div>
      <div class="customer_column">Good</div>
      <div class="customer_column">500</div>
    </div>
    <div class="customer_row">
      <div class="customer_column">Dell</div>
      <div class="customer_column">Sachin Sharma</div>
      <div class="customer_column">Laptop</div>
      <div class="customer_column">dell.com</div>
      <div class="customer_column">31-03-2020</div>
      <div class="customer_column">David</div>
      <div class="customer_column">150</div>
      <div class="customer_column">India</div>
      <div class="customer_column">Good</div>
      <div class="customer_column">500</div>
    </div>
    <div class="customer_row">
      <div class="customer_column">Dell</div>
      <div class="customer_column">Sachin Sharma</div>
      <div class="customer_column">Laptop</div>
      <div class="customer_column">dell.com</div>
      <div class="customer_column">31-03-2020</div>
      <div class="customer_column">David</div>
      <div class="customer_column">150</div>
      <div class="customer_column">India</div>
      <div class="customer_column">Good</div>
      <div class="customer_column">500</div>
    </div>
    <div class="customer_row">
      <div class="customer_column">Dell</div>
      <div class="customer_column">Sachin Sharma</div>
      <div class="customer_column">Laptop</div>
      <div class="customer_column">dell.com</div>
      <div class="customer_column">31-03-2020</div>
      <div class="customer_column">David</div>
      <div class="customer_column">150</div>
      <div class="customer_column">India</div>
      <div class="customer_column">Good</div>
      <div class="customer_column">500</div>
    </div>
    <div class="customer_row">
      <div class="customer_column">Dell</div>
      <div class="customer_column">Sachin Sharma</div>
      <div class="customer_column">Laptop</div>
      <div class="customer_column">dell.com</div>
      <div class="customer_column">31-03-2020</div>
      <div class="customer_column">David</div>
      <div class="customer_column">150</div>
      <div class="customer_column">India</div>
      <div class="customer_column">Good</div>
      <div class="customer_column">500</div>
    </div>
    <div class="customer_row">
      <div class="customer_column">Dell</div>
      <div class="customer_column">Sachin Sharma</div>
      <div class="customer_column">Laptop</div>
      <div class="customer_column">dell.com</div>
      <div class="customer_column">31-03-2020</div>
      <div class="customer_column">David</div>
      <div class="customer_column">150</div>
      <div class="customer_column">India</div>
      <div class="customer_column">Good</div>
      <div class="customer_column">500</div>
    </div>
    <div class="customer_row">
      <div class="customer_column">Dell</div>
      <div class="customer_column">Sachin Sharma</div>
      <div class="customer_column">Laptop</div>
      <div class="customer_column">dell.com</div>
      <div class="customer_column">31-03-2020</div>
      <div class="customer_column">David</div>
      <div class="customer_column">150</div>
      <div class="customer_column">India</div>
      <div class="customer_column">Good</div>
      <div class="customer_column">500</div>
    </div>
    <div class="customer_row">
      <div class="customer_column">Dell</div>
      <div class="customer_column">Sachin Sharma</div>
      <div class="customer_column">Laptop</div>
      <div class="customer_column">dell.com</div>
      <div class="customer_column">31-03-2020</div>
      <div class="customer_column">David</div>
      <div class="customer_column">150</div>
      <div class="customer_column">India</div>
      <div class="customer_column">Good</div>
      <div class="customer_column">500</div>
    </div>
    <div class="customer_row">
      <div class="customer_column">Dell</div>
      <div class="customer_column">Sachin Sharma</div>
      <div class="customer_column">Laptop</div>
      <div class="customer_column">dell.com</div>
      <div class="customer_column">31-03-2020</div>
      <div class="customer_column">David</div>
      <div class="customer_column">150</div>
      <div class="customer_column">India</div>
      <div class="customer_column">Good</div>
      <div class="customer_column">500</div>
    </div>
  </div>
</div>

标签： jqueryhtmlcss

Answer 1

如果我的问题正确，您可以使用 CSSflex和sticky

.customers_table {
  position: relative;
  display: flex;
  flex-flow: column nowrap;
  overflow: auto;
  height: 180px; /* DEMO ONLY to get vert. scrollbars */
}

.customer_row {
  display: flex;
  flex-flow: row nowrap;
}

.customer_headings {
  position: sticky;
  z-index: 1;
  top: 0;
}

.customer_headings > div {
  background-color: #4c4c4c;
  color: #ffffff;
}

.customer_row > div {
  flex: 0 0 250px;
  padding: 15px;
}

<div class="customers_table">
  <div class="customer_row customer_headings">
    <div>Company</div>
    <div>Name Heading is too long to fit here and shrinks</div>
    <div>Product</div>
    <div>Site</div>
    <div>Date Added</div>
    <div>Salesperson</div>
    <div>Quote</div>
    <div>Country</div>
    <div>Progress</div>
    <div>Estimate</div>
  </div>
  <div class="customer_row">
    <div>Yey!!</div>
    <div>Sachin Sharma</div>
    <div>Laptop</div>
    <div>dell.com</div>
    <div>31-03-2020</div>
    <div>David</div>
    <div>150</div>
    <div>India</div>
    <div>Good</div>
    <div>500</div>
  </div>
  <div class="customer_row">
    <div>Dell</div>
    <div>Sachin Sharma</div>
    <div>Laptop</div>
    <div>dell.com</div>
    <div>31-03-2020</div>
    <div>David</div>
    <div>150</div>
    <div>India</div>
    <div>Good</div>
    <div>500</div>
  </div>
  <div class="customer_row">
    <div>Dell</div>
    <div>Sachin Sharma</div>
    <div>Laptop</div>
    <div>dell.com</div>
    <div>31-03-2020</div>
    <div>David</div>
    <div>150</div>
    <div>India</div>
    <div>Good</div>
    <div>500</div>
  </div>
  <div class="customer_row">
    <div>Dell</div>
    <div>Sachin Sharma</div>
    <div>Laptop</div>
    <div>dell.com</div>
    <div>31-03-2020</div>
    <div>David</div>
    <div>150</div>
    <div>India</div>
    <div>Good</div>
    <div>500</div>
  </div>
  <div class="customer_row">
    <div>Dell</div>
    <div>Sachin Sharma</div>
    <div>Laptop</div>
    <div>dell.com</div>
    <div>31-03-2020</div>
    <div>David</div>
    <div>150</div>
    <div>India</div>
    <div>Good</div>
    <div>500</div>
  </div>
</div>