If this is your first visit, be sure to
check out the FAQ by clicking the
link above. You may have to register
before you can post: click the register link above to proceed. To start viewing messages,
select the forum that you want to visit from the selection below.

Enjoy an ad free experience by logging in. Not a member yet? Register.

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.

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.

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>

Users who have thanked Rowsdower! for this 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, divs, etc.

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.

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.

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.

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.

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.

Originally Posted by Rhialto

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.

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.

Originally Posted by Rhialto

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.

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

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?

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.