Sergey

Если просто посмотреть разметку что у Вас получилось, то у вас там div'ы в которых таблица. Таблица c заголовками в отдельном div'e от таблицы с простыми ячейками с данными.

Я просто прописал position:fixed к div'у с таблицей заголовков и "заголовок таблицы всегда виден"

Проще всего сделать flex'ом

<div class="parent">
  <div class="child">&nbsp;</div>
  <div class="child">&nbsp;</div>
  <div class="child">&nbsp;</div>
</div>

.parent {
  display: flex;
  justify-content: stretch;
  
  .child {
    flex:1;
    margin:2px 1px;
    
    border:1px solid #888;
    background: #ececec;
  }
}

Вот тут пример на codepen.io

Мне показывает там не пустоту, а часть следующего товара. Считаю это наоборот правильно, тогда посетитель подсознательно поймет, что там есть что-то еще и можно пролистнуть. Мелкие стрелки можно и не заметить



А так, можно в стилях расставить кучу точек под разные размеры и "расширять" или "сужать" блок товаров до вписываемых в ширину браузера 2-3-4-5 товаров...

Можно было бы использовать .menu-item:after {content: ''} , но ссылку в content не передашь. Почему нельзя доработать блок? Как вариант, можно добавлять ссылку через JavaScript, на чистом CSS тут не выйдет, если нельзя никаких изменений в блоке .cat-container делать...

- по-умолчанию занимает 100% родителя. display: flex распространяется на элемент и первых предков.

<div class="dblock">
  <div class="left">&nbsp;</div>
  <div class="right">
    <div><p>1</p></div>
    <div><p>1</p></div>
    <div><p>1</p></div>
    <div><p>1</p></div>
    <div><p>1</p></div>
  </div>
</div>

.dblock {
  display:flex;
}

.left,.right {
  flex: 1;
  border: 1px solid red;
  padding: .1em;
}

.right {
  display:flex;
  flex-direction: column;
  align-items: flex-start;
}
.right>div {
  border:1px solid #ececec;
}