Необходимо прокрутить фиксированный заголовок таблицы по горизонтали вместе с ее строками

Question

У меня есть таблица, созданная с использованием divs. Заголовок таблицы фиксируется, когда мы прокручиваем страницу вниз. Поскольку таблица слишком широка, чтобы поместиться в окне просмотра. Так что у меня есть возможность прокрутить его по горизонтали. Но проблема с заголовком таблицы. Когда мы прокручиваем страницу вниз, заголовок таблицы становится липким, и поэтому его нельзя прокручивать горизонтально вместе с телом таблицы. Есть ли обходной путь, чтобы мы могли прокручивать фиксированный заголовок по горизонтали с его строками?

Я знаю, что есть несколько похожих вопросов, уже заданных на сто, и я следовал за ними, но ни один из них на самом деле не работал для меня. Мой вопрос отличается в том смысле, что он останавливает заголовок таблицы, когда вы прокручиваете страницу, а не вначале.

$(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>

Answer 1

Если я правильно понял ваш вопрос, вы можете использовать CSS flex и 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>