Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Page 1 of 2 12 LastLast
Results 1 to 15 of 17
  1. #1
    New Coder
    Join Date
    Jul 2013
    Location
    Québec, QC - CANADA
    Posts
    12
    Thanks
    2
    Thanked 0 Times in 0 Posts

    Adaptative table, from 2 columns to 1

    I'm working on a page that would also looks fine on small screen devices. I'v searched for Adaptative tables and Responsive tables but haven't found a solution for what I'd like to do. My goal is to have 2 columns on large screen, and only 1 column on small screen. Maybe it sounds easy but I'm no expert so that’s why I'm asking for some help.

    Each row have 3 columns.

    On large screen I'd like it to show like this:

    "Title1,info1,text1" (space) "Title2,info2,text2"

    On small screen:

    "Title1,info1,text1"
    "Title2,info2,text2"

    Thanks

  • #2
    Regular Coder stevenmw's Avatar
    Join Date
    Jun 2007
    Location
    OK
    Posts
    497
    Thanks
    27
    Thanked 31 Times in 31 Posts
    You can use the display none css.

    Code:
    .col2 {
      display: none;
    }
    Display none hides the element and the element will not take up space on the screen where display hide will take up space on the screen.
    http://www.w3schools.com/css/css_display_visibility.asp


    Google media queries. Use media queries to use a different version of a class based on screen size or however you decide to check for a smaller screen. Then just apply display: none to the class inside of your media query so that the column is hidden on smaller screens.

    http://css-tricks.com/css-media-queries/
    Thanks!

  • #3
    Senior Coder Rowsdower!'s Avatar
    Join Date
    Oct 2008
    Location
    Some say it's everything.
    Posts
    2,027
    Thanks
    5
    Thanked 397 Times in 390 Posts
    Setting display:none; will completely hide the other column, whereas the OP wants to actually drop it down to the next row.

    But this sounds more like a <ul> or <ol> element than a table anyway.

    If you're using tables for layout this is a good time to discover the alternative. Otherwise, if I misread and this is a real table you are creating (with headings and columns/rows of "tabular" data) then you will need something else. I am not readily aware of any CSS that will convert 2-column tables to 1-column tables so my only thoughts would tend toward either javascript or else having a whole bunch of repeated data in the table and applying display:none; to certain table cells at certain screen sizes in order to fake the effect you are going for.

    Fortunately, if this is not really a true table that will actually help you achieve what you are trying to do since you can use float on each "cell" of your pseudo-table (a parent <ul> or <ol> element with each <li> acting as a cell) and then use media queries to shrink the container (if necessary - it might not be, depending on your layout) and remove the float setting and any declared width for each <li> (which will cause the "cells" to expand to full width within their container and will make them stack one on top of the next).

    Take a look at this brief example (assuming a <ul> is used):
    Code:
    <!doctype html>
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
    <title>Presto Change-o Column Count Changer</title>
    <style type="text/css">
    *{margin:0;padding:0;}
    body{padding:10px;font-family:verdana;font-size:15px;font-family:'trebuchet ms';}
    li{float:left;width:50%;background-color:#eca;min-height:250px;list-style-type:none;}
    li:nth-child(4n-7),li:nth-child(4n-6){background-color:#ace;}
    p{padding:20px;font-weight:bold;}
    @media all and (max-width:800px) and (min-width:400px){
    	/*	note: you can take out the min-width:400px condition above in practice, I only put it here to show you how you can chain the conditions...	*/
    	li{float:none;width:auto;}
    	li:nth-child(4n-7),li:nth-child(4n-6){background-color:#eca;}
    	li:nth-child(2n-1){background-color:#ace;}
    }
    </style>
    </head>
    <body>
    <ul>
      <li><p>This is the first bit of information.</p></li>
      <li><p>This is the second bit of information.</p></li>
      <li><p>This is the third bit of information.</p></li>
      <li><p>This is the fourth bit of information.</p></li>
      <li><p>This is the fifth bit of information.</p></li>
      <li><p>This is the sixth bit of information.</p></li>
    </ul>
    </body>
    </html>
    Last edited by Rowsdower!; 07-30-2013 at 03:15 PM. Reason: Added fancy nth-child selectors to give rows alternating colors in both states...
    The object of opening the mind, as of opening the mouth, is to shut it again on something solid. –G.K. Chesterton
    See Mediocrity in its Infancy
    It's usually a good idea to start out with this at the VERY TOP of your CSS: * {border:0;margin:0;padding:0;}
    Seek and you shall find... basically:
    validate your markup | view your page cross-browser/cross-platform | free web tutorials | free hosting

  • Users who have thanked Rowsdower! for this post:

    Rhialto (07-31-2013)

  • #4
    Regular Coder stevenmw's Avatar
    Join Date
    Jun 2007
    Location
    OK
    Posts
    497
    Thanks
    27
    Thanked 31 Times in 31 Posts
    Well if all the OP wants to do is move a column down then they can still use media queries and in the css just have display: inline-block; for larger screens, and for smaller screens do display: block;, and adjust the width. Which can be applied to lists, divs, etc.
    Thanks!

  • #5
    New Coder
    Join Date
    Jul 2013
    Location
    Québec, QC - CANADA
    Posts
    12
    Thanks
    2
    Thanked 0 Times in 0 Posts
    Since my original post I modified the layout a bit and now use 3 columns but the principle is the same. I first made a large table with 3 columns and in each cell I insert another table to properly format the 4 cells of data (2 rows, 2 columns).

    I think Rowsdower! solutions will work, all I have to do is move each table in a <li>.

    I'm slow to understand and will have to look at how nth-child works exactly but let me show you two tests I did.

    Original

    Rowsdower solution where I only pasted tables between <li> so it may not be perfect and I will have to fine tune nth-child I guess but when I use Firefox and play with the width, I see the tables move correctly so I must be close.

    I will try playing with different Xn+y values and see what happen.

    Thank you for your time.

  • #6
    New Coder
    Join Date
    Jul 2013
    Location
    Québec, QC - CANADA
    Posts
    12
    Thanks
    2
    Thanked 0 Times in 0 Posts
    My post don't show up (need to be approved by a mod 1st!?) so I cannot edit it. I wanted to say they that finally, no need of nth-child after all. Just having my tables in <li> will move those properly to fit the screen.

  • #7
    New Coder
    Join Date
    Jul 2013
    Location
    Québec, QC - CANADA
    Posts
    12
    Thanks
    2
    Thanked 0 Times in 0 Posts
    Ok now I know why my post don't show up, it's because I inserted links into it so you will have to wait.

    Is editing enabled only after X posts? I would have edited my previous message to add this instead of adding a new one. Oh well.

  • #8
    The fat guy next door VIPStephan's Avatar
    Join Date
    Jan 2006
    Location
    Halle (Saale), Germany
    Posts
    8,624
    Thanks
    6
    Thanked 1,001 Times in 974 Posts
    I approved your post, sorry for the inconvenience. The possibility to edit your posts is subject to a certain post count and time of membership, I think. Your posts aren’t going to be moderated automatically anymore after you have at least 6 posts.

  • #9
    Senior Coder Rowsdower!'s Avatar
    Join Date
    Oct 2008
    Location
    Some say it's everything.
    Posts
    2,027
    Thanks
    5
    Thanked 397 Times in 390 Posts
    Quote Originally Posted by stevenmw View Post
    Well if all the OP wants to do is move a column down then they can still use media queries and in the css just have display: inline block for larger screens, and for smaller screens do display: block, and adjust the width. Which can be applied to lists or whatever.
    Right, inline-block would be an alternative for float. Each method has its drawbacks. With float you have to remember to clear the float for the parent element if you need to ensure that the parent extends to the full height of the contents, so that extra consideration needs to be maintained in certain circumstances. Meanwhile, inline-block display works almost identically (and without the issue of sometimes needing to clear the floats) BUT, it introduces whitespace between elements unless you compact your code to a single unspaced line of code between elements (which hampers code maintenance). And to make matters worse, the size of the whitespace introduced will depend on the font size (and, indeed, the actual font) used or inherited by the parent element. That's too much loss of control for my tastes.

    Personally, I opted for the float because it seems less frustrating to deal with (in my opinion) but admittedly either method will work. Here is the inline-block version:

    WORKS (but I don't personally like it):
    Code:
    <!doctype html>
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
    <title>Presto Change-o Column Count Changer</title>
    <style type="text/css">
    *{margin:0;padding:0;}
    body{padding:10px;font-family:verdana;font-size:15px;font-family:'trebuchet ms';}
    li{display:inline-block;width:50%;background-color:#eca;min-height:250px;list-style-type:none;}
    li:nth-child(4n-7),li:nth-child(4n-6){background-color:#ace;}
    p{padding:20px;font-weight:bold;}
    @media all and (max-width:800px) and (min-width:400px){
    	/*	note: you can take out the min-width:400px condition above in practice, I only put it here to show you how you can chain the conditions...	*/
    	li{display:block;width:auto;}
    	li:nth-child(4n-7),li:nth-child(4n-6){background-color:#eca;}
    	li:nth-child(2n-1){background-color:#ace;}
    }
    </style>
    </head>
    <body>
    <ul>
      <li><p>This is the first bit of information.</p></li><li><p>This is the second bit of information.</p></li><li><p>This is the third bit of information.</p></li><li><p>This is the fourth bit of information.</p></li><li><p>This is the fifth bit of information.</p></li><li><p>This is the sixth bit of information.</p></li>
    </ul>
    </body>
    </html>
    When opened in the browser, that looks and functions just like the float version. But notice what happens if you take the same exact code and restore the indenting and line breaks to the source code:

    BROKEN (and will continue to haunt you even if you initially adjust your layout for it):
    Code:
    <!doctype html>
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
    <title>Presto Change-o Column Count Changer</title>
    <style type="text/css">
    *{margin:0;padding:0;}
    body{padding:10px;font-family:verdana;font-size:15px;font-family:'trebuchet ms';}
    li{display:inline-block;width:50%;background-color:#eca;min-height:250px;list-style-type:none;}
    li:nth-child(4n-7),li:nth-child(4n-6){background-color:#ace;}
    p{padding:20px;font-weight:bold;}
    @media all and (max-width:800px) and (min-width:400px){
    	/*	note: you can take out the min-width:400px condition above in practice, I only put it here to show you how you can chain the conditions...	*/
    	li{display:block;width:auto;}
    	li:nth-child(4n-7),li:nth-child(4n-6){background-color:#eca;}
    	li:nth-child(2n-1){background-color:#ace;}
    }
    </style>
    </head>
    <body>
    <ul>
      <li><p>This is the first bit of information.</p></li>
      <li><p>This is the second bit of information.</p></li>
      <li><p>This is the third bit of information.</p></li>
      <li><p>This is the fourth bit of information.</p></li>
      <li><p>This is the fifth bit of information.</p></li>
      <li><p>This is the sixth bit of information.</p></li>
    </ul>
    </body>
    </html>
    [Note: Even if you skip the indentation and just use line breaks in the source code you still get the problem of whitespace being introduced where you may not really want it.]


    Suddenly it's a single column when it should be two columns. The 50% width combined with a 15px font-sized "trebuchet ms" blank space causes the second element in the row to wrap to the next "line." If you reduce the <li> width to less than 50% you can get your two-column view back, sure, but you now have a variably-sized gap between columns that will change any time the actual or inherited font size or style of the container is changed. That's a major danger for page maintenance and you lose a degree of control over your actual layout. (For instance, exactly how many pixels wide is that blank space? Can you reliably predict it and adjust it to a target size if you need to?)

    Besides which, I really REALLY like "pretty printed" code, so I still recommend the float version in my previous post. However I fully agree that either method will get the job done under the right circumstances. You just have to pick which thing you would rather worry about: 1) be sure to clear your floats, or 2) deal with either a) variable whitespace in your rendered page, or b) sections of unspaced, single-line source code.

    Quote Originally Posted by Rhialto View Post
    Since my original post I modified the layout a bit and now use 3 columns but the principle is the same. I first made a large table with 3 columns and in each cell I insert another table to properly format the 4 cells of data (2 rows, 2 columns).

    I think Rowsdower! solutions will work, all I have to do is move each table in a <li>.

    I'm slow to understand and will have to look at how nth-child works exactly but let me show you two tests I did.

    Original

    Rowsdower solution where I only pasted tables between <li> so it may not be perfect and I will have to fine tune nth-child I guess but when I use Firefox and play with the width, I see the tables move correctly so I must be close.

    I will try playing with different Xn+y values and see what happen.

    Thank you for your time.
    Quote Originally Posted by Rhialto View Post
    My post don't show up (need to be approved by a mod 1st!?) so I cannot edit it. I wanted to say they that finally, no need of nth-child after all. Just having my tables in <li> will move those properly to fit the screen.
    Yes, the nth-child stuff really only impacts the "row" coloring, and serves no other purpose. It was really only there to help illustrate so removing it will solve your colorization issues when using this sample with a third column.
    The object of opening the mind, as of opening the mouth, is to shut it again on something solid. –G.K. Chesterton
    See Mediocrity in its Infancy
    It's usually a good idea to start out with this at the VERY TOP of your CSS: * {border:0;margin:0;padding:0;}
    Seek and you shall find... basically:
    validate your markup | view your page cross-browser/cross-platform | free web tutorials | free hosting

  • #10
    Regular Coder stevenmw's Avatar
    Join Date
    Jun 2007
    Location
    OK
    Posts
    497
    Thanks
    27
    Thanked 31 Times in 31 Posts
    You can use inline-block with a float and to clear the items, use overflow: hidden;
    Thanks!

  • #11
    New Coder
    Join Date
    Jul 2013
    Location
    Québec, QC - CANADA
    Posts
    12
    Thanks
    2
    Thanked 0 Times in 0 Posts
    Works wonder guys... it may take a while before I finish my page (2 weeks off soon) but once I've completed it I'll post a link for everyone to see.

  • #12
    Senior Coder Rowsdower!'s Avatar
    Join Date
    Oct 2008
    Location
    Some say it's everything.
    Posts
    2,027
    Thanks
    5
    Thanked 397 Times in 390 Posts
    Quote Originally Posted by stevenmw View Post
    You can use inline-block with a float and to clear the items, use overflow: hidden;
    Yes, overflow:hidden; on the parent <ul> works wonders to clear the <li> floats for the overall container (many consider using overflow settings to clear child floats a hack, but I use overflow:auto; regularly for this purpose so I am not judging). My warning was just that one would need to remember to do this, or something similar, to clear the floats. I quite agree that clearing the floats is a small problem which is easily fixed even if initially overlooked.

    I disagree about using inline-block along with float, though. Float alone does the job so why introduce inline-block at all? It won't hurt anything, but it adds nothing of value as far as I can tell and it's one more setting you need to change in the media query. And I'm incredibly lazy, so I would just skip it.

    Anyway, here is a sample 3-column version (the highlighted parts should be removed from any real use of this method):
    Code:
    <!doctype html>
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
    <title>Presto Change-o Column Count Changer</title>
    <style type="text/css">
    *{margin:0;padding:0;}
    body{padding:10px;font-family:'trebuchet ms','verdana';font-size:15px;}
    li{float:left;width:33.33%;min-height:150px;list-style-type:none;}
    li:nth-child(6n-2),li:nth-child(6n-5){clear:left;}	/*	added this to keep uneven cell heights from breaking row setups	*/
    		/*	kill the next two lines if you don't want to colorize rows	*/
    				li{background-color:#eca;}
    				li:nth-child(6n-5),li:nth-child(6n-4),li:nth-child(6n-3){background-color:#ace;}
    p{padding:20px;font-weight:bold;}
    @media all and (max-width:800px){
    	li{float:none;width:auto;}
    		/*	kill the next two lines if you don't want to colorize rows	*/
    				li:nth-child(6n-5),li:nth-child(6n-4),li:nth-child(6n-3){background-color:#eca;}
    				li:nth-child(2n-1){background-color:#ace;}
    }
    </style>
    </head>
    <body>
    <ul>
      <li><p>This is the first bit of information.</p></li>
      <li><p>This is the second bit of information.</p></li>
      <li><p>This is the third bit of information.</p></li>
      <li><p>This is the fourth bit of information.</p></li>
      <li><p>This is the fifth bit of information.</p></li>
      <li><p>This is the sixth bit of information.</p></li>
      <li><p>This is the seventh bit of information.</p></li>
      <li><p>This is the eighth bit of information.</p></li>
      <li><p>This is the ninth bit of information.</p></li>
      <li><p>This is the tenth bit of information.</p></li>
      <li><p>This is the eleventh bit of information.</p></li>
      <li><p>This is the twelfth bit of information.</p></li>
      <li><p>This is the thirteenth bit of information.</p></li>
      <li><p>This is the forteenth bit of information.</p></li>
      <li><p>This is the fifteenth bit of information.</p></li>
    </ul>
    </body>
    </html>
    Note that I added this:
    Code:
    li:nth-child(6n-2),li:nth-child(6n-5){clear:left;}
    ^That clears floats for each row so that overly tall cells don't wreck the whole thing...
    The object of opening the mind, as of opening the mouth, is to shut it again on something solid. –G.K. Chesterton
    See Mediocrity in its Infancy
    It's usually a good idea to start out with this at the VERY TOP of your CSS: * {border:0;margin:0;padding:0;}
    Seek and you shall find... basically:
    validate your markup | view your page cross-browser/cross-platform | free web tutorials | free hosting

  • #13
    New Coder
    Join Date
    Jul 2013
    Location
    Québec, QC - CANADA
    Posts
    12
    Thanks
    2
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by Rowsdower! View Post
    Note that I added this:
    Code:
    li:nth-child(6n-2),li:nth-child(6n-5){clear:left;}
    ^That clears floats for each row so that overly tall cells don't wreck the whole thing...
    I had a similar problem and to get around it I also change the font size. It's cool to play with the browser window width and see this change on the fly.

    I tested your example above but removed the min-height:150px and the problem still show up a few times when resizing.

  • #14
    Senior Coder Rowsdower!'s Avatar
    Join Date
    Oct 2008
    Location
    Some say it's everything.
    Posts
    2,027
    Thanks
    5
    Thanked 397 Times in 390 Posts
    Quote Originally Posted by Rhialto View Post
    I had a similar problem and to get around it I also change the font size. It's cool to play with the browser window width and see this change on the fly.

    I tested your example above but removed the min-height:150px and the problem still show up a few times when resizing.
    If you are talking specifically about my sample code and if you're talking about the white gaps as seen here:



    Then that is not something you can really fix without wrapping every three <li> elements in some sort of wrapper so that you can "fake" the background color when some elements in a row are taller than others. This is possible, and if you really need to show borders or row colors it might be necessary. The current setup just doesn't deal with it because I didn't know it would need to, and dealing with it is more complex than ignoring it.

    On the other hand, if you are not talking about the white space between the bottom of short "cells" and the top of next row, then can you please show me a specific example of the problem (screen shot plus either a link or the source code for the page), and specify what screen width(s) you are seeing the problem on?

    Were you seeing the problem in a page with my exact sample code or was it in a modified version with your own content (and possibly style sheets) added in?
    Attached Thumbnails Attached Thumbnails Adaptative table, from 2 columns to 1-sample.png  
    The object of opening the mind, as of opening the mouth, is to shut it again on something solid. –G.K. Chesterton
    See Mediocrity in its Infancy
    It's usually a good idea to start out with this at the VERY TOP of your CSS: * {border:0;margin:0;padding:0;}
    Seek and you shall find... basically:
    validate your markup | view your page cross-browser/cross-platform | free web tutorials | free hosting

  • #15
    New Coder
    Join Date
    Jul 2013
    Location
    Québec, QC - CANADA
    Posts
    12
    Thanks
    2
    Thanked 0 Times in 0 Posts
    Don't worry Rowsdower! I was only testing your own code.

    On my page I don't use colored cells so I don't have that problem... but... I just found that on PC browsers my website looks fine and on tablet (we have an iPad 4th gen) it behave weirdly when we zoom in.

    I think I will have to start another thread if I want someone to look into this.


  •  
    Page 1 of 2 12 LastLast

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •