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

Question

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

Answer 1

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.