Измените таблицу на двухколоночный дизайн на маленьких экранах

Question

У меня есть <table>, и мне нужно, чтобы он был двухколонным на маленьких экранах.Вот как это выглядит на большом экране:

А вот как это выглядит в настоящее время на маленьком экране (я сделал снимок всего сайта, вы можете увидеть около 1/3 страницы сразу).

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

HTML таблицы выглядит следующим образом:

<div class="pure-u-1 pure-u-md-1-3">
        <h1 class="content-subhead">Průměry</h1>
        <table class="pure-table">
            <tbody>
                <tr>
                    <td>
                        <a href="/student/subject/Čj">Čj</a>
                    </td>
                    <td>
                        A
                    </td>
                </tr>
                ...
                <tr>
                    <td>
                        <a href="/student/subject/SM">SM</a>
                    </td>
                    <td>
                        Z
                    </td>
                </tr>
            </tbody>
        </table>
    </div>

Я использую purecss .Странные классы div означают: заставьте эту таблицу занимать всю строку сетки, кроме случаев, когда есть большой экран (без смартфона), затем сделайте так, чтобы она занимала 1/3 строки сетки.

Здесь полно Пример jsfiddle .

Answer 1

Я выяснил проблему.

Это из-за класса pure-u-1, потому что при просмотре на экранах мобильных устройств он будет иметь ширину 100%.

измените его на pure-u-2 чтобы он разделился на две части

Я не могу добавить весь код здесь, поэтому я обновляю скрипку.

<div class="pure-u-2 pure-u-md-1-3">
        <h1 class="content-subhead">Průměry</h1>
        <table class="pure-table">
            <tbody>
                <tr>
                    <td>
                        <a href="/student/subject/Čj">Čj</a>
                    </td>
                    <td>
                        A
                    </td>
                </tr>
                ...
                <tr>
                    <td>
                        <a href="/student/subject/SM">SM</a>
                    </td>
                    <td>
                        Z
                    </td>
                </tr>
            </tbody>
        </table>
    </div>

Скриптовая ссылка: https://jsfiddle.net/9zy08xen/2/

Answer 2

основной HTML-код выглядит следующим образом.

<div class="pure-u-1 pure-u-md-1-3">
        <h1 class="content-subhead">Průměry</h1>
        <table class="pure-table">
                <thead>
                  <tr>
                    <th>0</th>
                    <th>1</th>
                    <th>2</th>
                    <th>3</th>
                  </tr>
                </thead>
                <tbody>
                 <tr>
                   <td>Po</td>
                 </tr>
                 <tr>
                   <td>Ut</td>
                 </tr>
                 <tr>
                   <td>St</td>
                 </tr>
                 <tr>
                   <td>Po</td>
                 </tr> 
                </tbody>
        </table>
    </div>

и, если вы хотите добавить css, проверьте эту ссылку https://www.w3schools.com/css/css_rwd_grid.asp