Grow your CSS skills. Land your dream job.

table-cell display and responsive design

  • # December 7, 2012 at 3:56 pm

    Often e-commerce sites display product results in a grid format. If there are a fixed number of results per row, then display:table-row and display:table-cell are enough to make it work in modern browsers. What if you want the number of items in each row to be determined by the available width?

    How can a table-like layout be accomplished with a fluid and/or responsive page?

    • If you have a series of table-cell divs without table-row wrappers, they will all be shown a single row.
    • If you use float:left, the equal height feature of table-cell is lost.
    • Using a fixed height can truncate the contents of a product or leave too much white space, so the height should be based on the context of the row.

    Any ideas?

    # December 7, 2012 at 4:32 pm

    …but tables consist of rows and columns.

    How can you have an indeterminate number of columns?

    # December 7, 2012 at 5:37 pm

    inline-block

    # December 10, 2012 at 11:56 am

    Inline-block is indeed what I needed, wolfcry. Thanks!

    # December 10, 2012 at 1:34 pm

    The deals page on this site behaves kinda like that: http://css-tricks.com/deals/

    Although it does use floats and min-height, so maybe not perfect for you.

    If they don’t need to be perfectly table-like, this demo is worth seeing: http://sickdesigner.com/demo/css-masonry/css-masonry.html

    I think the future of this is going to be flexbox, but not really worth thinking about yet, since you need production-ready code.

    # April 5, 2013 at 1:58 pm

    inline-block is good, but I need the child elements to have fill the parent elements in height and yet act like inline-block, so lets say I set width: 30% and min-width:180px, the elements should drop below and not stay like table cells…

Viewing 6 posts - 1 through 6 (of 6 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".