Bootstrap 4 адаптивных таблиц не работают внутри флекс-контекста - PullRequest
Новая
       36

Bootstrap 4 адаптивных таблиц не работают внутри флекс-контекста

0 голосов
/ 26 апреля 2020

Мне нужен простой макет (всегда ширина окна браузера 100%) с боковой панелью (<aside>) и основным содержимым (<main>) на основе flexbox. Боковая панель имеет постоянную ширину, а основное содержимое имеет гибкую ширину (остальная часть ширины браузера).

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

<div class="d-flex w-100">
  <aside>some sidebar content</aside>
  <main class="flex-grow-1">
    <div class="table-responsive"> <!-- problem is here! -->
      <table class="table">
        <tr>
          <td>1.Test</td>
          <td>2.Test</td>
          <td>3.Test</td>
          <!-- ... -->
          <td>21.Test</td>
        </tr>
      </table>
    </div>
  </main>
</div>

Пример: https://jsfiddle.net/cichy380/q34p5j1u/

...