Bdtjtk

I have <table> and I need it to be two-column on small screens. Here is what it looks like on large screen:

And here is what it currently looks like on small screen (I screenshoted whole website, you can see about 1/3 of the page at once).

When on small screen, there's ton of unused space on the right of the table on the top. So I'd like to have the table split into two columns - via CSS if possible.

HTML of the table looks like this:

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

I use purecss. The weird classes of the div mean: Make this table occupy the whole grid row, except when there is big screen (no smartphone), then make this occupy 1/3 of the grid row.

Here is full jsfiddle example.

basic HTML code is like this.

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

and if you want to add css, then check this link https://www.w3schools.com/css/css_rwd_grid.asp

I figured out the problem.

It is because of the class pure-u-1 because this will be in 100% width when viewing it in mobile screens.

change it to pure-u-2 so that it will split into two parts

I can't add the whole code here, so I'm updating the fiddle .

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

Fiddle link: https://jsfiddle.net/9zy08xen/2/