Как создать адаптивную таблицу в маленьком устройстве?

Question

У меня есть простое приложение с простой таблицей с четырьмя столбцами, и мне нужно иметь отзывчивую таблицу, где каждый столбец будет ниже другого, но я не знаю, как это сделать. Я надеюсь, что есть какой-то ответ без использования Javascript.

Теперь у меня есть такая таблица:

+---------------+
| Some text     |
+---------------+
| A | B | C | D |
+---+---+---+---+
| A | B | C | D |
+---+---+---+---+
| A | B | C | D |
+---+---+---+---+
| A | B | C | D |
+---+---+---+---+

И мне нужно получить этот результат в меньшем разрешении:

 | A | B | C | D |

+---+---+-
| A | B |
+---+---+
| A | B |
+---+---+
| A | B |
+---+---+
| C | D |
+---+---+
| C | D |
+---+---+
| C | D |
+---+---+

И так далее. Это как-то возможно? Вот мой JSfiddle . Также ответ в jsfiddle был бы лучшим.

Здесь HTML

<table>
    <tbody>
        <tr>
            <td style="text-align: center; font-size: 14px;" colspan="4">Some title</td>
        </tr>
        <tr>
            <td style="text-align: center; background-color: #e8e8e8;">&nbsp;<span style="color: #1e2a64;"><strong>Title</strong></span>

            </td>
            <td style="text-align: center; background-color: #dedcdd;"><strong>&nbsp;<span style="color: #1e2a64;">Title2</span></strong>

            </td>
            <td style="text-align: center; background-color: #d5d3d4;"><strong>&nbsp;<span style="color: #1e2a64;">Title3</span></strong>

            </td>
            <td style="text-align: center; background-color: #e0f0cb;"><strong>&nbsp;<span style="color: #5ca402;">Title4</span></strong>

            </td>
        </tr>
        <tr>
            <td style="text-align: center; background-color: #f5f5f5;">
                <div class="circle"><strong>&nbsp;1.500</strong>  <sup>eur</sup>

                    <br>month</div>
            </td>
            <td style="text-align: center; background-color: #efedee;">
                <div class="circle"><strong>40.000</strong>  <sup>eur</sup>

                    <br>month</div>
            </td>
            <td style="text-align: center; background-color: #e7e5e6;">
                <div class="circle"><strong>&nbsp;700</strong>  <sup>eur</sup>

                    <br>month</div>
            </td>
            <td style="text-align: center; background-color: #f0fae2;">
                <div class="circle-free">
                    <p class="hidden_paragraph">hidden</p>
                    <p style="padding-left: 10px;">0 <sup>eur</sup>

                    </p>
                </div>
            </td>
        </tr>
        <tr>
            <td style="text-align: center; background-color: #f5f5f5;">&nbsp;<strong>Text</strong>

                <p></p>
                <p><span style="color: #555555;">Lorem Ipsum</span>

                </p>
                <p><span style="color: #555555;">Lorem Ipsum</span>

                </p>
                <p><span style="color: #555555;">Lorem Ipsum</span>

                </p>
            </td>
            <td style="text-align: center; background-color: #efedee;">&nbsp;&nbsp;<strong>Text</strong>

                <p></p>
                <p><span style="color: #555555;">Lorem Ipsum</span>

                </p>
                <p><span style="color: #555555;"><del>Lorem Ipsum</del></span>

                </p>
                <p><span style="color: #555555;"><del>Lorem Ipsum</del></span>

                </p>
            </td>
            <td style="text-align: center; background-color: #e7e5e6;">&nbsp;&nbsp;<strong>Text</strong>

                <p></p>
                <p><span style="color: #555555;"><del>Lorem Ipsum</del></span>

                </p>
                <p><span style="color: #555555;"><del>Lorem Ipsum</del></span>

                </p>
                <p><span style="color: #555555;"><del>Lorem Ipsum</del></span>

                </p>
            </td>
            <td style="text-align: center; background-color: #f0fae2;">&nbsp;&nbsp;<strong>Text</strong>

                <p></p>
                <p><span style="color: #555555;"><del>Lorem Ipsum</del></span>

                </p>
                <p><span style="color: #555555;"><del>Lorem Ipsum</del></span>

                </p>
                <p><span style="color: #555555;"><del>Lorem Ipsum</del></span>

                </p>
            </td>
        </tr>
        <tr style="height: 70px;">
            <td style="text-align: center; background-color: #f5f5f5; vertical-align: middle;">
                <input id="kontakt_btn" type="button" value="contact">
            </td>
            <td style="text-align: center; background-color: #efedee; vertical-align: middle;">
                <input id="kontakt_btn" type="button" value="contact">
            </td>
            <td style="text-align: center; background-color: #e7e5e6; vertical-align: middle;">
                <input id="kontakt_btn" type="button" value="contact">
            </td>
            <td style="text-align: center; background-color: #f0fae2; vertical-align: middle;">
                <input id="kontakt_btn" type="button" value="contact">
            </td>
        </tr>
    </tbody>
</table>

CSS

@media all and (max-width:768px){

  tr{
    display: inline;
    float:left;
}

td{
   display: block;
}
}

Примечание: Нет Bootstrap

Answer 1

Поскольку я пока не могу комментировать, я отвечу так. CSS сетка - это чистая CSS, а также, безусловно, самый простой способ решить вашу проблему.

Единственным другим способом будет либо bootstrap, который вы исключили, либо невероятно ненужный объем работы с flexbox .