Change table to two-column design on small screens - html

Question

I have <table> and I need it to be two-column on small screens. Here is what it looks like on large screen:
(source: firefoxusercontent.com)
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).
(source: firefoxusercontent.com)
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>
Čj
</td>
<td>
A
</td>
</tr>
...
<tr>
<td>
SM
</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.

Answer 1

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

Answer 2

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>
Čj
</td>
<td>
A
</td>
</tr>
...
<tr>
<td>
SM
</td>
<td>
Z
</td>
</tr>
</tbody>
</table>
</div>
Fiddle link: https://jsfiddle.net/9zy08xen/2/