Change table to two-column design on small screens












0














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



small screen



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.










share|improve this question
























  • Your screenshots were broken
    – Viira
    2 days ago










  • @Viira I just fixed them, thanks
    – SoptikHa
    2 days ago










  • But in the HTML you have only provided a part of the code. umm.. can you fork up in a codepen or a jsfiddle?
    – Viira
    2 days ago










  • @Viira Sure, here: jsfiddle.net/9zy08xen
    – SoptikHa
    2 days ago










  • Yeah got it i figured out the problem
    – Viira
    2 days ago
















0














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



small screen



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.










share|improve this question
























  • Your screenshots were broken
    – Viira
    2 days ago










  • @Viira I just fixed them, thanks
    – SoptikHa
    2 days ago










  • But in the HTML you have only provided a part of the code. umm.. can you fork up in a codepen or a jsfiddle?
    – Viira
    2 days ago










  • @Viira Sure, here: jsfiddle.net/9zy08xen
    – SoptikHa
    2 days ago










  • Yeah got it i figured out the problem
    – Viira
    2 days ago














0












0








0







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



small screen



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.










share|improve this question















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



small screen



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.







html css responsive-design css-tables






share|improve this question















share|improve this question













share|improve this question




share|improve this question








edited 2 days ago

























asked 2 days ago









SoptikHa

105112




105112












  • Your screenshots were broken
    – Viira
    2 days ago










  • @Viira I just fixed them, thanks
    – SoptikHa
    2 days ago










  • But in the HTML you have only provided a part of the code. umm.. can you fork up in a codepen or a jsfiddle?
    – Viira
    2 days ago










  • @Viira Sure, here: jsfiddle.net/9zy08xen
    – SoptikHa
    2 days ago










  • Yeah got it i figured out the problem
    – Viira
    2 days ago


















  • Your screenshots were broken
    – Viira
    2 days ago










  • @Viira I just fixed them, thanks
    – SoptikHa
    2 days ago










  • But in the HTML you have only provided a part of the code. umm.. can you fork up in a codepen or a jsfiddle?
    – Viira
    2 days ago










  • @Viira Sure, here: jsfiddle.net/9zy08xen
    – SoptikHa
    2 days ago










  • Yeah got it i figured out the problem
    – Viira
    2 days ago
















Your screenshots were broken
– Viira
2 days ago




Your screenshots were broken
– Viira
2 days ago












@Viira I just fixed them, thanks
– SoptikHa
2 days ago




@Viira I just fixed them, thanks
– SoptikHa
2 days ago












But in the HTML you have only provided a part of the code. umm.. can you fork up in a codepen or a jsfiddle?
– Viira
2 days ago




But in the HTML you have only provided a part of the code. umm.. can you fork up in a codepen or a jsfiddle?
– Viira
2 days ago












@Viira Sure, here: jsfiddle.net/9zy08xen
– SoptikHa
2 days ago




@Viira Sure, here: jsfiddle.net/9zy08xen
– SoptikHa
2 days ago












Yeah got it i figured out the problem
– Viira
2 days ago




Yeah got it i figured out the problem
– Viira
2 days ago












2 Answers
2






active

oldest

votes


















0














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






share|improve this answer





























    0














    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/






    share|improve this answer























    • Thank you. And how would you do something like this? !screenshot
      – SoptikHa
      2 days ago












    • I've updated the fiddle link please see that too...
      – Viira
      2 days ago











    Your Answer






    StackExchange.ifUsing("editor", function () {
    StackExchange.using("externalEditor", function () {
    StackExchange.using("snippets", function () {
    StackExchange.snippets.init();
    });
    });
    }, "code-snippets");

    StackExchange.ready(function() {
    var channelOptions = {
    tags: "".split(" "),
    id: "1"
    };
    initTagRenderer("".split(" "), "".split(" "), channelOptions);

    StackExchange.using("externalEditor", function() {
    // Have to fire editor after snippets, if snippets enabled
    if (StackExchange.settings.snippets.snippetsEnabled) {
    StackExchange.using("snippets", function() {
    createEditor();
    });
    }
    else {
    createEditor();
    }
    });

    function createEditor() {
    StackExchange.prepareEditor({
    heartbeatType: 'answer',
    autoActivateHeartbeat: false,
    convertImagesToLinks: true,
    noModals: true,
    showLowRepImageUploadWarning: true,
    reputationToPostImages: 10,
    bindNavPrevention: true,
    postfix: "",
    imageUploader: {
    brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
    contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
    allowUrls: true
    },
    onDemand: true,
    discardSelector: ".discard-answer"
    ,immediatelyShowMarkdownHelp:true
    });


    }
    });














    draft saved

    draft discarded


















    StackExchange.ready(
    function () {
    StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53945418%2fchange-table-to-two-column-design-on-small-screens%23new-answer', 'question_page');
    }
    );

    Post as a guest















    Required, but never shown

























    2 Answers
    2






    active

    oldest

    votes








    2 Answers
    2






    active

    oldest

    votes









    active

    oldest

    votes






    active

    oldest

    votes









    0














    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






    share|improve this answer


























      0














      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






      share|improve this answer
























        0












        0








        0






        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






        share|improve this answer












        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







        share|improve this answer












        share|improve this answer



        share|improve this answer










        answered 2 days ago









        JsWizard

        331314




        331314

























            0














            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/






            share|improve this answer























            • Thank you. And how would you do something like this? !screenshot
              – SoptikHa
              2 days ago












            • I've updated the fiddle link please see that too...
              – Viira
              2 days ago
















            0














            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/






            share|improve this answer























            • Thank you. And how would you do something like this? !screenshot
              – SoptikHa
              2 days ago












            • I've updated the fiddle link please see that too...
              – Viira
              2 days ago














            0












            0








            0






            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/






            share|improve this answer














            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/






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





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






            share|improve this answer














            share|improve this answer



            share|improve this answer








            edited 2 days ago

























            answered 2 days ago









            Viira

            2,138423




            2,138423












            • Thank you. And how would you do something like this? !screenshot
              – SoptikHa
              2 days ago












            • I've updated the fiddle link please see that too...
              – Viira
              2 days ago


















            • Thank you. And how would you do something like this? !screenshot
              – SoptikHa
              2 days ago












            • I've updated the fiddle link please see that too...
              – Viira
              2 days ago
















            Thank you. And how would you do something like this? !screenshot
            – SoptikHa
            2 days ago






            Thank you. And how would you do something like this? !screenshot
            – SoptikHa
            2 days ago














            I've updated the fiddle link please see that too...
            – Viira
            2 days ago




            I've updated the fiddle link please see that too...
            – Viira
            2 days ago


















            draft saved

            draft discarded




















































            Thanks for contributing an answer to Stack Overflow!


            • Please be sure to answer the question. Provide details and share your research!

            But avoid



            • Asking for help, clarification, or responding to other answers.

            • Making statements based on opinion; back them up with references or personal experience.


            To learn more, see our tips on writing great answers.





            Some of your past answers have not been well-received, and you're in danger of being blocked from answering.


            Please pay close attention to the following guidance:


            • Please be sure to answer the question. Provide details and share your research!

            But avoid



            • Asking for help, clarification, or responding to other answers.

            • Making statements based on opinion; back them up with references or personal experience.


            To learn more, see our tips on writing great answers.




            draft saved


            draft discarded














            StackExchange.ready(
            function () {
            StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53945418%2fchange-table-to-two-column-design-on-small-screens%23new-answer', 'question_page');
            }
            );

            Post as a guest















            Required, but never shown





















































            Required, but never shown














            Required, but never shown












            Required, but never shown







            Required, but never shown

































            Required, but never shown














            Required, but never shown












            Required, but never shown







            Required, but never shown







            Popular posts from this blog

            Monofisismo

            Angular Downloading a file using contenturl with Basic Authentication

            Olmecas