0

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

Есть набросок с плагином Owl Carousel, но с такой версткой я не знаю как вставить строку, которая будет идти во всю ширину таблицы + не знаю как такое можно стилизовать, чтоб работало как таблица.
Подскажите, пожалуйста, как можно реализовать данную таблицу.

$('.owl-carousel').owlCarousel({
  loop: false,
  margin: 10,
  responsive: {
    0: {
      items: 1
    },
    320: {
      items: 2
    },
    500: {
      items: 3
    },
    750: {
      items: 4
    },
    970: {
      items: 5
    }
  }
})
<link href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.1.3/assets/owl.carousel.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.1.3/owl.carousel.min.js"></script>

<div class="d-table owl-carousel owl-loaded owl-drag">
  <div class="item">
    <p>№ п/п</p>
    <p>1.</p>
    <p>2.</p>
    <p>3.</p>
  </div>

  <div class="item">
    <p>Lorem ipsum dolor sit.</p>
    <p>
      Lorem ipsum dolor, sit amet consectetur adipisicing elit. Corrupti dolorem saepe repellendus molestias.
    </p>
    <p>
      Lorem ipsum dolor sit amet consectetur adipisicing elit. Fugit, asperiores? Quod accusantium dolorem suscipit, nobis distinctio explicabo eos, possimus autem magnam quis porro?
    </p>
    <p>
      Lorem ipsum dolor sit amet consectetur adipisicing elit. Maiores tempore molestias quidem voluptatem corrupti illo expedita. Fuga quaerat non consequatur rerum. Ipsum ullam earum nobis iure odit?
    </p>
  </div>

  <div class="item">
    <p>
      Lorem ipsum dolor sit amet.
    </p>
    <p>
      Lorem ipsum dolor sit amet consectetur adipisicing elit. Magni, accusantium deleniti a unde asperiores aperiam, sit dignissimos eligendi eveniet accusamus dolore repellat, sed consectetur excepturi!
    </p>
    <p>
      Lorem ipsum dolor sit amet consectetur, adipisicing elit. Sed quaerat blanditiis dolorum excepturi quisquam a incidunt omnis praesentium et sunt.
    </p>
    <p>
      Lorem ipsum dolor sit, amet consectetur adipisicing elit. Nam doloremque ab quaerat natus pariatur illum delectus suscipit eaque mollitia optio.
    </p>
  </div>

  <div class="item">
    <p>
      Lorem, ipsum dolor.
    </p>
    <p>
      Lorem ipsum dolor sit amet consectetur adipisicing elit.
    </p>
    <p>
      Lorem ipsum dolor sit amet consectetur adipisicing elit.
    </p>
    <p>
      Lorem ipsum dolor sit amet consectetur adipisicing elit.
    </p>
  </div>

  <div class="item">
    <p>
      Lorem ipsum, dolor sit amet consectetur adipisicing elit. Quia!
    </p>
    <p>
      Lorem, ipsum dolor.
    </p>
    <p>
      Lorem, ipsum dolor.
    </p>
    <p>
      Lorem.
    </p>
  </div>
</div>

1 ответ 1

2

К сожалению, данная проблема не решена. Строки всегда будут иметь фиксированную ширину, которая при уменьшении разрешения экрана, будет выходить за пределы собственного контейнера. Как вариант можно только посоветовать жестко задать таблице размер по ширине и присвоить ей стиль overflow:scroll. Таким образом, при уменьшении экрана (адаптивность) по ширине, внизу таблицы появится горизонтальная полоса прокрутки. Решение "так себе", но ничего другого без "костылей" на JS/jQuery не придумать.

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.