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.
source to share
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>
source to share
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%;
}
}
Literature:
source to share
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%;
}
}
source to share