Отзывчивый стол в начальной загрузке

Question

Мой вопрос довольно прост, как мне сделать эту таблицу отзывчивой с помощью Twitter начальной загрузки 4? Ниже приведена JS Fiddle Link .

<div class="some-table-section">
<div class="container">
    <table class="table some-table">
        <thead>
            <tr>
                <th scope="col"></th>
                <th scope="col">Plan 1</th>
                <th scope="col">Plan 2</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <th scope="row">Option 1</th>
                <td>$1</td>
                <td>$2</td>
            </tr>
            <tr>
                <th scope="row">Option 2</th>
                <td>1</td>
                <td>2</td>
            </tr>
            <tr>
                <th scope="row">Option 3</th>
                <td>Unlimited</td>
                <td>Unlimited</td>
            </tr>
            <tr>
                <th scope="row"></th>
                <td><a href="#" class="btn btn-primary">Select this plan</td>
                <td><a href="#" class="btn btn-primary">Select this plan</td>
            </tr>
        </tbody>
    </table>
</div>
</div>

Мне нужна адаптивная версия этой таблицы, так что plan 2 ниже plan 1 в адаптивной версии. PS. Вы можете найти текущий CSS в JS Fiddle Link .

Answer 1

Вы должны проверить Документы Bootstrap: https://getbootstrap.com/docs/4.3/content/tables/#responsive-tables

Просто оберните свою таблицу с помощью .table-responsive

Базовый пример:

<div class="table-responsive">
    <table class="table">
       ...
    </table>
</div>

У вас может быть отзывчивая точка остановатаблица с использованием класса table-responsive{-sm|-md|-lg|-xl}