Отображение только одной полосы прокрутки на ось для элементов с синхронизацией прокрутки - PullRequest
Новая
       0

Отображение только одной полосы прокрутки на ось для элементов с синхронизацией прокрутки

0 голосов
/ 26 марта 2020

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

Единственная «проблема», с которой я столкнулся, заключается в том, что в каждой таблице отображается полоса прокрутки для обоих горизонтальные и вертикальные оси. Поскольку таблицу нельзя прокручивать независимо, имеет смысл использовать только одну прокрутку для каждой оси. Вертикальная полоса прокрутки должна отображаться в правой части родительского элемента, а горизонтальная полоса прокрутки должна отображаться в нижней части родительского элемента, продолжаясь по всей длине (под обеими таблицами).

Единственный способ, которым я я мог подумать о том, что потенциально мог бы достичь этого эффекта: сделать что-то вроде установки обеих таблиц в абсолютное / фиксированное положение, измерить величину переполнения в таблице и воспроизвести эту величину переполнения в родительском элементе, используя скрытые элементы, затем синхронизируем прокрутку родительского элемента с обеими таблицами. Тем не менее, это похоже на довольно излишний / глупый метод решения этой проблемы.

Для справки, я собрал Fiddle здесь

И вот изображение желаемый результат 

function init() {
  let isScrollSyncing = false;
  let table1 = document.querySelector('#table1');
  let table2 = document.querySelector('#table2');

  let scrollListener = (target, src) => {
    if (!isScrollSyncing) {
      isScrollSyncing = true;
      target.scrollTop = src.scrollTop;
      target.scrollLeft = src.scrollLeft;
    } else {
      isScrollSyncing = false;
    }
  };

  table1.addEventListener('scroll', () => {
    scrollListener(table2, table1);
  });
  table2.addEventListener('scroll', () => {
    scrollListener(table1, table2);
  });
}

init();
#compareTables {
  display: flex;
  position: relative;
  flex-direction: row;
  width: 500px;
  height: 250px;
}

.table {
  display: grid;
  position: relative;
  overflow: auto;
  grid-gap: 1px;
  grid-template-columns: repeat(4, 100px);
}

#table1 .cell {
  background: grey;
}

.cell {
  display: flex;
  position: relative;
  background-color: white;
  height: 20px;
  box-shadow: 0 0 0 1px black;
  justify-content: center;
  align-items: center;
}
<div id='compareTables'>
  <div id='table1' class='table'>
    <div class='cell'>Content</div>
    <div class='cell'>Content</div>
    <div class='cell'>Content</div>
    <div class='cell'>Content</div>
    <div class='cell'>Content</div>
    <div class='cell'>Content</div>
    <div class='cell'>Content</div>
    <div class='cell'>Content</div>
    <div class='cell'>Content</div>
    <div class='cell'>Content</div>
    <div class='cell'>Content</div>
    <div class='cell'>Content</div>
    <div class='cell'>Content</div>
    <div class='cell'>Content</div>
    <div class='cell'>Content</div>
    <div class='cell'>Content</div>
    <div class='cell'>Content</div>
    <div class='cell'>Content</div>
    <div class='cell'>Content</div>
    <div class='cell'>Content</div>
    <div class='cell'>Content</div>
    <div class='cell'>Content</div>
    <div class='cell'>Content</div>
    <div class='cell'>Content</div>
    <div class='cell'>Content</div>
    <div class='cell'>Content</div>
    <div class='cell'>Content</div>
    <div class='cell'>Content</div>
    <div class='cell'>Content</div>
    <div class='cell'>Content</div>
    <div class='cell'>Content</div>
    <div class='cell'>Content</div>
    <div class='cell'>Content</div>
    <div class='cell'>Content</div>
    <div class='cell'>Content</div>
    <div class='cell'>Content</div>
    <div class='cell'>Content</div>
    <div class='cell'>Content</div>
    <div class='cell'>Content</div>
    <div class='cell'>Content</div>
    <div class='cell'>Content</div>
    <div class='cell'>Content</div>
    <div class='cell'>Content</div>
    <div class='cell'>Content</div>
    <div class='cell'>Content</div>
    <div class='cell'>Content</div>
    <div class='cell'>Content</div>
    <div class='cell'>Content</div>
    <div class='cell'>Content</div>
    <div class='cell'>Content</div>
    <div class='cell'>Content</div>
    <div class='cell'>Content</div>
    <div class='cell'>Content</div>
    <div class='cell'>Content</div>
    <div class='cell'>Content</div>
    <div class='cell'>Content</div>
    <div class='cell'>Content</div>
    <div class='cell'>Content</div>
    <div class='cell'>Content</div>
    <div class='cell'>Content</div>
    <div class='cell'>Content</div>
    <div class='cell'>Content</div>
    <div class='cell'>Content</div>
    <div class='cell'>Content</div>
    <div class='cell'>Content</div>
    <div class='cell'>Content</div>
    <div class='cell'>Content</div>
    <div class='cell'>Content</div>
    <div class='cell'>Content</div>
    <div class='cell'>Content</div>
    <div class='cell'>Content</div>
    <div class='cell'>Content</div>
    <div class='cell'>Content</div>
    <div class='cell'>Content</div>
    <div class='cell'>Content</div>
    <div class='cell'>Content</div>
    <div class='cell'>Content</div>
    <div class='cell'>Content</div>
    <div class='cell'>Content</div>
    <div class='cell'>Content</div>
    <div class='cell'>Content</div>
    <div class='cell'>Content</div>
    <div class='cell'>Content</div>
    <div class='cell'>Content</div>
    <div class='cell'>Content</div>
    <div class='cell'>Content</div>
    <div class='cell'>Content</div>
    <div class='cell'>Content</div>
    <div class='cell'>Content</div>
    <div class='cell'>Content</div>
    <div class='cell'>Content</div>
    <div class='cell'>Content</div>
    <div class='cell'>Content</div>
    <div class='cell'>Content</div>
    <div class='cell'>Content</div>
    <div class='cell'>Content</div>
    <div class='cell'>Content</div>
    <div class='cell'>Content</div>
    <div class='cell'>Content</div>
    <div class='cell'>Content</div>
    <div class='cell'>Content</div>
    <div class='cell'>Content</div>
    <div class='cell'>Content</div>
    <div class='cell'>Content</div>
    <div class='cell'>Content</div>
    <div class='cell'>Content</div>
    <div class='cell'>Content</div>
    <div class='cell'>Content</div>
    <div class='cell'>Content</div>
    <div class='cell'>Content</div>
    <div class='cell'>Content</div>
    <div class='cell'>Content</div>
    <div class='cell'>Content</div>
    <div class='cell'>Content</div>
    <div class='cell'>Content</div>
    <div class='cell'>Content</div>
    <div class='cell'>Content</div>
    <div class='cell'>Content</div>
    <div class='cell'>Content</div>
    <div class='cell'>Content</div>
    <div class='cell'>Content</div>
    <div class='cell'>Content</div>
    <div class='cell'>Content</div>
    <div class='cell'>Content</div>
    <div class='cell'>Content</div>
    <div class='cell'>Content</div>
    <div class='cell'>Content</div>
    <div class='cell'>Content</div>
    <div class='cell'>Content</div>
    <div class='cell'>Content</div>
    <div class='cell'>Content</div>
    <div class='cell'>Content</div>
    <div class='cell'>Content</div>
    <div class='cell'>Content</div>
    <div class='cell'>Content</div>
    <div class='cell'>Content</div>
    <div class='cell'>Content</div>
    <div class='cell'>Content</div>
    <div class='cell'>Content</div>
    <div class='cell'>Content</div>
    <div class='cell'>Content</div>
    <div class='cell'>Content</div>
    <div class='cell'>Content</div>
    <div class='cell'>Content</div>
  </div>
  <div id='table2' class='table'>
    <div class='cell'>Content</div>
    <div class='cell'>Content</div>
    <div class='cell'>Content</div>
    <div class='cell'>Content</div>
    <div class='cell'>Content</div>
    <div class='cell'>Content</div>
    <div class='cell'>Content</div>
    <div class='cell'>Content</div>
    <div class='cell'>Content</div>
    <div class='cell'>Content</div>
    <div class='cell'>Content</div>
    <div class='cell'>Content</div>
    <div class='cell'>Content</div>
    <div class='cell'>Content</div>
    <div class='cell'>Content</div>
    <div class='cell'>Content</div>
    <div class='cell'>Content</div>
    <div class='cell'>Content</div>
    <div class='cell'>Content</div>
    <div class='cell'>Content</div>
    <div class='cell'>Content</div>
    <div class='cell'>Content</div>
    <div class='cell'>Content</div>
    <div class='cell'>Content</div>
    <div class='cell'>Content</div>
    <div class='cell'>Content</div>
    <div class='cell'>Content</div>
    <div class='cell'>Content</div>
    <div class='cell'>Content</div>
    <div class='cell'>Content</div>
    <div class='cell'>Content</div>
    <div class='cell'>Content</div>
    <div class='cell'>Content</div>
    <div class='cell'>Content</div>
    <div class='cell'>Content</div>
    <div class='cell'>Content</div>
    <div class='cell'>Content</div>
    <div class='cell'>Content</div>
    <div class='cell'>Content</div>
    <div class='cell'>Content</div>
    <div class='cell'>Content</div>
    <div class='cell'>Content</div>
    <div class='cell'>Content</div>
    <div class='cell'>Content</div>
    <div class='cell'>Content</div>
    <div class='cell'>Content</div>
    <div class='cell'>Content</div>
    <div class='cell'>Content</div>
    <div class='cell'>Content</div>
    <div class='cell'>Content</div>
    <div class='cell'>Content</div>
    <div class='cell'>Content</div>
    <div class='cell'>Content</div>
    <div class='cell'>Content</div>
    <div class='cell'>Content</div>
    <div class='cell'>Content</div>
    <div class='cell'>Content</div>
    <div class='cell'>Content</div>
    <div class='cell'>Content</div>
    <div class='cell'>Content</div>
    <div class='cell'>Content</div>
    <div class='cell'>Content</div>
    <div class='cell'>Content</div>
    <div class='cell'>Content</div>
    <div class='cell'>Content</div>
    <div class='cell'>Content</div>
    <div class='cell'>Content</div>
    <div class='cell'>Content</div>
    <div class='cell'>Content</div>
    <div class='cell'>Content</div>
    <div class='cell'>Content</div>
    <div class='cell'>Content</div>
    <div class='cell'>Content</div>
    <div class='cell'>Content</div>
    <div class='cell'>Content</div>
    <div class='cell'>Content</div>
    <div class='cell'>Content</div>
    <div class='cell'>Content</div>
    <div class='cell'>Content</div>
    <div class='cell'>Content</div>
    <div class='cell'>Content</div>
    <div class='cell'>Content</div>
    <div class='cell'>Content</div>
    <div class='cell'>Content</div>
    <div class='cell'>Content</div>
    <div class='cell'>Content</div>
    <div class='cell'>Content</div>
    <div class='cell'>Content</div>
    <div class='cell'>Content</div>
    <div class='cell'>Content</div>
    <div class='cell'>Content</div>
    <div class='cell'>Content</div>
    <div class='cell'>Content</div>
    <div class='cell'>Content</div>
    <div class='cell'>Content</div>
    <div class='cell'>Content</div>
    <div class='cell'>Content</div>
    <div class='cell'>Content</div>
    <div class='cell'>Content</div>
    <div class='cell'>Content</div>
    <div class='cell'>Content</div>
    <div class='cell'>Content</div>
    <div class='cell'>Content</div>
    <div class='cell'>Content</div>
    <div class='cell'>Content</div>
    <div class='cell'>Content</div>
    <div class='cell'>Content</div>
    <div class='cell'>Content</div>
    <div class='cell'>Content</div>
    <div class='cell'>Content</div>
    <div class='cell'>Content</div>
    <div class='cell'>Content</div>
    <div class='cell'>Content</div>
    <div class='cell'>Content</div>
    <div class='cell'>Content</div>
    <div class='cell'>Content</div>
    <div class='cell'>Content</div>
    <div class='cell'>Content</div>
    <div class='cell'>Content</div>
    <div class='cell'>Content</div>
    <div class='cell'>Content</div>
    <div class='cell'>Content</div>
    <div class='cell'>Content</div>
    <div class='cell'>Content</div>
    <div class='cell'>Content</div>
    <div class='cell'>Content</div>
    <div class='cell'>Content</div>
    <div class='cell'>Content</div>
    <div class='cell'>Content</div>
    <div class='cell'>Content</div>
    <div class='cell'>Content</div>
    <div class='cell'>Content</div>
    <div class='cell'>Content</div>
    <div class='cell'>Content</div>
    <div class='cell'>Content</div>
    <div class='cell'>Content</div>
    <div class='cell'>Content</div>
    <div class='cell'>Content</div>
    <div class='cell'>Content</div>
    <div class='cell'>Content</div>
    <div class='cell'>Content</div>
    <div class='cell'>Content</div>
    <div class='cell'>Content</div>
    <div class='cell'>Content</div>
  </div>
</div>

Любой совет будет высоко ценится.

1 Ответ

0 голосов
/ 26 марта 2020

Если я правильно понял ваше требование, это то, что вы имеете в виду?

Для ясности просмотрите его в full screen. 

function init() {
  let isScrollSyncing = false;
  let table1 = document.querySelector('#table1');
  let table2 = document.querySelector('#table2');

  let scrollListener = (target, src) => {
    if (!isScrollSyncing) {
      isScrollSyncing = true;
      target.scrollTop = src.scrollTop;
      target.scrollLeft = src.scrollLeft;
    } else {
      isScrollSyncing = false;
    }
  };

  table1.addEventListener('scroll', () => {
    scrollListener(table2, table1);
  });
  table2.addEventListener('scroll', () => {
    scrollListener(table1, table2);
  });
}

init();
#compareTables {
  display: flex;
  position: relative;
  flex-direction: row;
  width: 600px;
  height: 250px;
  overflow: scroll;
  border: 1px solid red;
}

#table1 {
  width: auto;
}

#table2 {
  width: auto;
  padding-left: 15px;
}

.table {
  display: grid;
  position: relative;
  grid-gap: 1px;
  grid-template-columns: repeat(4, 100px);
}

#table1 .cell {
  background: grey;
}

.cell {
  display: flex;
  position: relative;
  background-color: white;
  height: 20px;
  box-shadow: 0 0 0 1px black;
  justify-content: center;
  align-items: center;
}
<div id='compareTables'>
  <div id='table1' class='table'>
    <div class='cell'>Content</div>
    <div class='cell'>Content</div>
    <div class='cell'>Content</div>
    <div class='cell'>Content</div>
    <div class='cell'>Content</div>
    <div class='cell'>Content</div>
    <div class='cell'>Content</div>
    <div class='cell'>Content</div>
    <div class='cell'>Content</div>
    <div class='cell'>Content</div>
    <div class='cell'>Content</div>
    <div class='cell'>Content</div>
    <div class='cell'>Content</div>
    <div class='cell'>Content</div>
    <div class='cell'>Content</div>
    <div class='cell'>Content</div>
    <div class='cell'>Content</div>
    <div class='cell'>Content</div>
    <div class='cell'>Content</div>
    <div class='cell'>Content</div>
    <div class='cell'>Content</div>
    <div class='cell'>Content</div>
    <div class='cell'>Content</div>
    <div class='cell'>Content</div>
    <div class='cell'>Content</div>
    <div class='cell'>Content</div>
    <div class='cell'>Content</div>
    <div class='cell'>Content</div>
    <div class='cell'>Content</div>
    <div class='cell'>Content</div>
    <div class='cell'>Content</div>
    <div class='cell'>Content</div>
    <div class='cell'>Content</div>
    <div class='cell'>Content</div>
    <div class='cell'>Content</div>
    <div class='cell'>Content</div>
    <div class='cell'>Content</div>
    <div class='cell'>Content</div>
    <div class='cell'>Content</div>
    <div class='cell'>Content</div>
    <div class='cell'>Content</div>
    <div class='cell'>Content</div>
    <div class='cell'>Content</div>
    <div class='cell'>Content</div>
    <div class='cell'>Content</div>
    <div class='cell'>Content</div>
    <div class='cell'>Content</div>
    <div class='cell'>Content</div>
    <div class='cell'>Content</div>
    <div class='cell'>Content</div>
    <div class='cell'>Content</div>
    <div class='cell'>Content</div>
    <div class='cell'>Content</div>
    <div class='cell'>Content</div>
    <div class='cell'>Content</div>
    <div class='cell'>Content</div>
    <div class='cell'>Content</div>
    <div class='cell'>Content</div>
    <div class='cell'>Content</div>
    <div class='cell'>Content</div>
    <div class='cell'>Content</div>
    <div class='cell'>Content</div>
    <div class='cell'>Content</div>
    <div class='cell'>Content</div>
    <div class='cell'>Content</div>
    <div class='cell'>Content</div>
    <div class='cell'>Content</div>
    <div class='cell'>Content</div>
    <div class='cell'>Content</div>
    <div class='cell'>Content</div>
    <div class='cell'>Content</div>
    <div class='cell'>Content</div>
    <div class='cell'>Content</div>
    <div class='cell'>Content</div>
    <div class='cell'>Content</div>
    <div class='cell'>Content</div>
    <div class='cell'>Content</div>
    <div class='cell'>Content</div>
    <div class='cell'>Content</div>
    <div class='cell'>Content</div>
    <div class='cell'>Content</div>
    <div class='cell'>Content</div>
    <div class='cell'>Content</div>
    <div class='cell'>Content</div>
    <div class='cell'>Content</div>
    <div class='cell'>Content</div>
    <div class='cell'>Content</div>
    <div class='cell'>Content</div>
    <div class='cell'>Content</div>
    <div class='cell'>Content</div>
    <div class='cell'>Content</div>
    <div class='cell'>Content</div>
    <div class='cell'>Content</div>
    <div class='cell'>Content</div>
    <div class='cell'>Content</div>
    <div class='cell'>Content</div>
    <div class='cell'>Content</div>
    <div class='cell'>Content</div>
    <div class='cell'>Content</div>
    <div class='cell'>Content</div>
    <div class='cell'>Content</div>
    <div class='cell'>Content</div>
    <div class='cell'>Content</div>
    <div class='cell'>Content</div>
    <div class='cell'>Content</div>
    <div class='cell'>Content</div>
    <div class='cell'>Content</div>
    <div class='cell'>Content</div>
    <div class='cell'>Content</div>
    <div class='cell'>Content</div>
    <div class='cell'>Content</div>
    <div class='cell'>Content</div>
    <div class='cell'>Content</div>
    <div class='cell'>Content</div>
    <div class='cell'>Content</div>
    <div class='cell'>Content</div>
    <div class='cell'>Content</div>
    <div class='cell'>Content</div>
    <div class='cell'>Content</div>
    <div class='cell'>Content</div>
    <div class='cell'>Content</div>
    <div class='cell'>Content</div>
    <div class='cell'>Content</div>
    <div class='cell'>Content</div>
    <div class='cell'>Content</div>
    <div class='cell'>Content</div>
    <div class='cell'>Content</div>
    <div class='cell'>Content</div>
    <div class='cell'>Content</div>
    <div class='cell'>Content</div>
    <div class='cell'>Content</div>
    <div class='cell'>Content</div>
    <div class='cell'>Content</div>
    <div class='cell'>Content</div>
    <div class='cell'>Content</div>
    <div class='cell'>Content</div>
    <div class='cell'>Content</div>
    <div class='cell'>Content</div>
    <div class='cell'>Content</div>
    <div class='cell'>Content</div>
    <div class='cell'>Content</div>
    <div class='cell'>Content</div>
    <div class='cell'>Content</div>
    <div class='cell'>Content</div>
  </div>
  <div id='table2' class='table'>
    <div class='cell'>Content</div>
    <div class='cell'>Content</div>
    <div class='cell'>Content</div>
    <div class='cell'>Content</div>
    <div class='cell'>Content</div>
    <div class='cell'>Content</div>
    <div class='cell'>Content</div>
    <div class='cell'>Content</div>
    <div class='cell'>Content</div>
    <div class='cell'>Content</div>
    <div class='cell'>Content</div>
    <div class='cell'>Content</div>
    <div class='cell'>Content</div>
    <div class='cell'>Content</div>
    <div class='cell'>Content</div>
    <div class='cell'>Content</div>
    <div class='cell'>Content</div>
    <div class='cell'>Content</div>
    <div class='cell'>Content</div>
    <div class='cell'>Content</div>
    <div class='cell'>Content</div>
    <div class='cell'>Content</div>
    <div class='cell'>Content</div>
    <div class='cell'>Content</div>
    <div class='cell'>Content</div>
    <div class='cell'>Content</div>
    <div class='cell'>Content</div>
    <div class='cell'>Content</div>
    <div class='cell'>Content</div>
    <div class='cell'>Content</div>
    <div class='cell'>Content</div>
    <div class='cell'>Content</div>
    <div class='cell'>Content</div>
    <div class='cell'>Content</div>
    <div class='cell'>Content</div>
    <div class='cell'>Content</div>
    <div class='cell'>Content</div>
    <div class='cell'>Content</div>
    <div class='cell'>Content</div>
    <div class='cell'>Content</div>
    <div class='cell'>Content</div>
    <div class='cell'>Content</div>
    <div class='cell'>Content</div>
    <div class='cell'>Content</div>
    <div class='cell'>Content</div>
    <div class='cell'>Content</div>
    <div class='cell'>Content</div>
    <div class='cell'>Content</div>
    <div class='cell'>Content</div>
    <div class='cell'>Content</div>
    <div class='cell'>Content</div>
    <div class='cell'>Content</div>
    <div class='cell'>Content</div>
    <div class='cell'>Content</div>
    <div class='cell'>Content</div>
    <div class='cell'>Content</div>
    <div class='cell'>Content</div>
    <div class='cell'>Content</div>
    <div class='cell'>Content</div>
    <div class='cell'>Content</div>
    <div class='cell'>Content</div>
    <div class='cell'>Content</div>
    <div class='cell'>Content</div>
    <div class='cell'>Content</div>
    <div class='cell'>Content</div>
    <div class='cell'>Content</div>
    <div class='cell'>Content</div>
    <div class='cell'>Content</div>
    <div class='cell'>Content</div>
    <div class='cell'>Content</div>
    <div class='cell'>Content</div>
    <div class='cell'>Content</div>
    <div class='cell'>Content</div>
    <div class='cell'>Content</div>
    <div class='cell'>Content</div>
    <div class='cell'>Content</div>
    <div class='cell'>Content</div>
    <div class='cell'>Content</div>
    <div class='cell'>Content</div>
    <div class='cell'>Content</div>
    <div class='cell'>Content</div>
    <div class='cell'>Content</div>
    <div class='cell'>Content</div>
    <div class='cell'>Content</div>
    <div class='cell'>Content</div>
    <div class='cell'>Content</div>
    <div class='cell'>Content</div>
    <div class='cell'>Content</div>
    <div class='cell'>Content</div>
    <div class='cell'>Content</div>
    <div class='cell'>Content</div>
    <div class='cell'>Content</div>
    <div class='cell'>Content</div>
    <div class='cell'>Content</div>
    <div class='cell'>Content</div>
    <div class='cell'>Content</div>
    <div class='cell'>Content</div>
    <div class='cell'>Content</div>
    <div class='cell'>Content</div>
    <div class='cell'>Content</div>
    <div class='cell'>Content</div>
    <div class='cell'>Content</div>
    <div class='cell'>Content</div>
    <div class='cell'>Content</div>
    <div class='cell'>Content</div>
    <div class='cell'>Content</div>
    <div class='cell'>Content</div>
    <div class='cell'>Content</div>
    <div class='cell'>Content</div>
    <div class='cell'>Content</div>
    <div class='cell'>Content</div>
    <div class='cell'>Content</div>
    <div class='cell'>Content</div>
    <div class='cell'>Content</div>
    <div class='cell'>Content</div>
    <div class='cell'>Content</div>
    <div class='cell'>Content</div>
    <div class='cell'>Content</div>
    <div class='cell'>Content</div>
    <div class='cell'>Content</div>
    <div class='cell'>Content</div>
    <div class='cell'>Content</div>
    <div class='cell'>Content</div>
    <div class='cell'>Content</div>
    <div class='cell'>Content</div>
    <div class='cell'>Content</div>
    <div class='cell'>Content</div>
    <div class='cell'>Content</div>
    <div class='cell'>Content</div>
    <div class='cell'>Content</div>
    <div class='cell'>Content</div>
    <div class='cell'>Content</div>
    <div class='cell'>Content</div>
    <div class='cell'>Content</div>
    <div class='cell'>Content</div>
    <div class='cell'>Content</div>
    <div class='cell'>Content</div>
    <div class='cell'>Content</div>
    <div class='cell'>Content</div>
    <div class='cell'>Content</div>
    <div class='cell'>Content</div>
    <div class='cell'>Content</div>
    <div class='cell'>Content</div>
    <div class='cell'>Content</div>
  </div>
</div>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...