在小屏幕上将表格更改为两列设计

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 example。

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