Responsive CSS table layout makes one cell act like a row

I have a layout design that I was trying to follow through display:table-cell

. This, however, is not the best option as it is causing me problems.

Desired output:

I want a layout like this on smaller screens (less than 992px):

+----+----+
|    |    |
+----+----+
|         |
+---------+

      

But then on large screens (larger than 992px) to have this layout:

+--+--+--+
|  |  |  |
+--+--+--+

      

The caveat is that they may not be the same size and I want them to stretch vertically so that they are all the same height.

I am currently doing this with

.table {
    width:100%;
    display:table;
}    

.cell {
    display:table-cell;
    width:50%;
    position:relative;
    padding:0px 10px;
    border:1px solid #000;
}

      

My problem comes from the fact that in order to wrap the third cell, I need to give it its own string. But then the cell will only extend for the first 50% (under the first cell) and not stretch 100%. This can be fixed by making the second row its own table, but then getting the two tables side by side with the correct screen size is also difficult.

If there is a better way to make the height of the matching divs perfect. I'm using bootstrap, so using its grids would be easy as long as I can make them the same.

Note. Faux columns don't work for my scenario as the background won't be colored / spaced appropriately.

+3


source to share


3 answers


You can just use table-layout:fixed

to ensure the cells get equal width.

For the query part, @media

use display:table-caption

for the last cell and set caption-side:bottom

to specify the placement.

JSFiddle: http://jsfiddle.net/7kpcf46r/ (resize the output frame and see)



.table {
    display: table;
    table-layout: fixed;
    border-collapse: collapse;
    width: 100%;
}
.cell {
    display: table-cell;
    border: 1px solid red;
}
@media (max-width: 768px) {
    .cell:last-child {
        display: table-caption;
        caption-side: bottom;
    }
}
      

<div class="table">
    <div class="cell">One Line</div>
    <div class="cell">Two<br/>Lines</div>
    <div class="cell">More<br/>Than two<br/>Lines</div>
</div>
      

Run codeHide result


+2


source


You can use media queries for stylish content depending on the width of the screen, for example given HTML:

<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>

      

CSS:

/* Setting the defaults, to apply regardless of
   screen width: */
html, body {
    /* removing margin and padding, setting
       font-size to 0 in order to prevent
       new-lines creating space between sibling
       elements: */
    margin: 0;
    padding: 0;
    font-size: 0;
}

/* resetting the font-size for all descendants of
   the body element: */
body * {
    font-size: 16px;
}

div.cell {
    /* border-box, causes the browser to include
       the width of the borders and padding within
       the assigned width of the element: */
    box-sizing: border-box;
    /* instead of table-cell, causing elements
       to default to displaying side-by-side: */
    display: inline-block;
    /* the default behaviour is to show at
       50% of the width of the parent (body)
       element: */
    width: 50%;
    margin: 0;
    padding: 0;
    height: 40vh;
    border: 2px solid #000;
}

/*
   Note: in this demo I'm using screen widths of
         of 600px (min/max) to demonstrate the
   principles within the constraints of JS Fiddle's
   limited viewport. In your project, obviously, use
   your required width of 992px.
*/

/* in screen-widths less than 600px
   the last-child has a width of 100%: */
@media all and (max-width: 600px) {
    div.cell:last-child {
        width: 100%;
    }
}

/* in screen-widths greater than 600px
   div.cell elements have a width of 33%
   (including the last-child) to display
   side-by-side across the viewport: */
@media all and (min-width: 600px) {
    div.cell {
        width: 33%;
    }
}

      



JS Fiddle demo .

Literature:

0


source


You can do it like this: http://jsfiddle.net/z1kwrm8p/2/

HTML:

<div class="table">
    <div class="cell" id="c1">ABCD</div><!--
 --><div class="cell" id="c2">EFGH</div><!--
 --><div class="cell" id="c3">XYZ PQRS ABCD EFGH IJKL MNOP QRSTUVWXYZ</div>
</div>

      

CSS

.table {
    width:100%;
    display:block;
    background:#009933;
}    

.cell {
    display:inline-block;
    width:50%;
}


#c1 {
    background:#99ccff;
}

#c2 {
    background:#ff9966;
}  

#c3 {
    width:100%;
    background:#66FF66;
}

@media only screen and (max-width: 991px) {
  /* rules that only apply for canvases narrower than 992px */
    .table {
        display:table;
    }

    .cell {
        display:table-cell;
        width:33.3%;
    }    

    #c3 {
        width:33.3%;
    }
}

      

0


source







All Articles