Using 'table' and 'table-cell' with display property in responsive design?

Question

Using table and table-cell

I am using display: table; on the container and display: table-cell; on the child elements, to highlight some posts horizontally on a page.

The thing is, I have no idea as to how to make them responsive, i.e. as the screen-size becomes smaller, each child (i.e. table-cell) should become proportionately smaller, whilst continuing to stay aligned horizontally.

How do I do this?

Example Code: http://www.codepen.io/anon/pen/dCLgq
Demo: http://codepen.io/anon/full/dCLgq

Try adding `table-layout:fixed` on the container and `width:auto` on the children — John Dvorak, Feb 14 '13 at 19:48
If you know the number of columns, setting an exact width should work: `width:25%` in case of four columns. — John Dvorak, Feb 14 '13 at 19:51
@JanDvorak I tried `width: 31%;` and `float: left;` on the child elements, and that seems to have done the trick. Is that what you suggested that I do? (Please add it as an answer, for others. I am going with braican's solution for now.) Thank you! — its_me, Feb 14 '13 at 20:11

braican · Accepted Answer · 2014-02-03T14:05:53.080

10

To scale the inner containers down with the page, you can set the container div's width to 100%:

in your example:

#the-big-stories {
    display: table;
    table-layout: fixed;

    /** add 100% width **/
    width:100%;
}

further, if you want to scale the images with the child containers, just give them width: 100%; as well with height:auto;

see your codepen forked below:

http://codepen.io/braican/pen/xCmsw

You'll probably need to use media queries to really get the stuff inside to play nicely together, but the container will scale with the browser, as will the inner div's.

edited Feb 03 '14 at 14:05

answered Feb 14 '13 at 19:55

braican

2,172
1
18
16

`table-layout: fixed;` with `display: table;` solved my prob here. Thanks. :) – Mayeenul Islam Oct 29 '13 at 13:29

Using 'table' and 'table-cell' with display property in responsive design?

1 Answers1