адаптивная таблица

InstantCMS 2.X

как создать адаптивную таблицу

#1 12 октября 2022 в 12:33

Добрый день!

господа сориентируйте в какую сторону копать 

2.15.0 modern

вот пример кода

<div class=«table-responsive-sm»>
  <table class=«table»>
    ...
  </table>
</div>

Полоса прокрутки не появляется, в чем может быть нюанс?

#2 12 октября 2022 в 12:36

Полоса прокрутки не появляется, в чем может быть нюанс?

sferoid

может в фигурных кавычках?:)

#3 12 октября 2022 в 14:38

Полоса прокрутки не появляется, в чем может быть нюанс?

sferoid

может в фигурных кавычках?:)

kalikimaka

Кавычки норм, тут так выводит если не пользоваться вставкой кода, вот вставкой кода

  1. <div class="table-responsive">
  2. <table class="table">

Полоса прокрутки не появляется, в чем может быть нюанс?

sferoid

может в фигурных кавычках?:)

kalikimaka

Кавычки норм, тут так выводит если не пользоваться вставкой кода, вот вставкой кода

  1. <div class="table-responsive">
  2. <table class="table">
sferoid

Добавил так, но хотелось бы проще 

  1. <style type="text/css">/* CSS */
  2. .big-table {
  3. overflow: auto;
  4. position: relative;
  5. }
  6. .big-table table {
  7. display: inline-block;
  8. vertical-align: top;
  9. max-width: 100%;
  10. overflow-x: auto;
  11. white-space: nowrap;
  12. -webkit-overflow-scrolling: touch;
  13. }
  14. </style>
  15. <div class="big-table">
#4 13 октября 2022 в 17:42

 sferoid, должно работать. Может у вас в таблице нет контента, который в ней не умещается. А с добавлением ваших правок, в частности

  1. white-space: nowrap;

такой «не умещающийся» контент появляется.

Документация getbootstrap.com/docs/4.6/content/tables/

Вы не можете отвечать в этой теме.
Войдите или зарегистрируйтесь, чтобы писать на форуме.
Используя этот сайт, вы соглашаетесь с тем, что мы используем файлы cookie.