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

我有

，我需要它在小屏幕上有两列。以下是它在大屏幕上的外观：
（来源：）

这是它目前在小屏幕上的样子（我截屏了整个网站，你可以一次看到大约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>

普雷斯利
A.
...
Z

我用。div的奇怪类意味着：让这个表占据整个网格行，除非有大屏幕（没有智能手机），然后让它占据网格行的1/3

---

这里是完整的。

基本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>

普雷斯利
0
1.
2.
3.
Po
美国犹他州
圣
Po

---

如果您想添加css，请检查此链接

我发现了问题所在

这是因为类

pure-u-1

，因为在移动屏幕上查看时，它的宽度为100%

将其更改为

pure-u-2

，以便将其分为两部分

我不能在这里添加全部代码，所以我正在更新fiddle

普雷斯利
A.
...
Z

您的屏幕截图是broken@Viira我刚刚修复了它们，谢谢，但在HTML中，您只提供了部分代码。嗯。。你能用密码笔或jsfiddle付钱吗？@Viira当然，这里：是的，我解决了问题谢谢。你怎么会这样做！