Variable amount of columns in table based on screen width

Question

I'm working on a website but I'm running into a small problem, I've got a table with a variable amount of squares in it, all those squares are exaclty the same size as the others. At the moment I'm displaying those squares in a table with 5 columns, however, on a mobile device I'd rather have 2 columns beacuse the size of those squares are to small for the content on a 720 pixels wide mobile screen, which causes the content to go outside of the square.

What I want is a variable amount of columns based on the size of the screen. How could I do such a thing?

What you need is Responsive Design : en.m.wikipedia.org/wiki/Responsive_web_design — Saagar Elias Jacky
– Saagar Elias Jacky, Commented Apr 20, 2015 at 17:59
@MrLister as long as it forms a grid and the squared are all equally sized squares not — Oli414
– Oli414, Commented Apr 20, 2015 at 19:52

Mr Lister · Accepted Answer · 2015-04-20 21:08:28Z

5

If the blocks are all exactly the same size, it's no problem turning them into inline-blocks instead of table cells.
Inline blocks are blocks that behave like words in plain text, so they flow nicely when the window is resized, just the way you want it.

And all you need is

div {
    display:inline-block;
}

See Fiddle.

answered Apr 20, 2015 at 21:08

Mr Lister

46.8k15 gold badges118 silver badges156 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

user9016207 Over a year ago

damn that lp website is SLOW.

Brandon Bravos Over a year ago

Thank you so much. Ive been trying forever. Coming from iPhone development so it's so hard to figure out what things in css do

DrCord · Accepted Answer · 2015-04-20 18:04:57Z

1

For the below example table you could use the given CSS to hide the 3rd and 4th columns depending on the screen size.

HTML

<table>
  <tr>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
  </tr>
</table>

CSS

@media screen and (max-width: 300px) {
    table td:nth-of-type(3) {
        display: none;
    }
}
@media screen and (max-width: 600px) {
    table td:nth-of-type(4) {
        display: none;
    }
}

answered Apr 20, 2015 at 18:04

DrCord

3,9203 gold badges36 silver badges47 bronze badges

Comments

Benjamin · Accepted Answer · 2015-04-20 18:23:23Z

1

If the rest of the squares should still be visible and just slide into new rows then i'm afraid u cant avoid JavaScript since the DOM would have to be altered ..

In case tables are not necessary i would reccomend using floats on the squares (like Mr Lister)

answered Apr 20, 2015 at 18:23

Benjamin

1,1041 gold badge20 silver badges34 bronze badges

Collectives™ on Stack Overflow

Variable amount of columns in table based on screen width

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related