Using CSS for responsive table layouts instead of floats
CSS Responsive Table Layout
Using CSS for responsive table layouts instead of floats. Responsive (everything goes down to one row each), too.
Made with
Html
Css/SASS
Html
<div class="wrapper">
<div class="table">
<div class="row header">
<div class="cell">
Name
</div>
<div class="cell">
Age
</div>
<div class="cell">
Occupation
</div>
<div class="cell">
Location
</div>
</div>
<div class="row">
<div class="cell" data-title="Name">
Luke Peters
</div>
<div class="cell" data-title="Age">
25
</div>
<div class="cell" data-title="Occupation">
Freelance Web Developer
</div>
<div class="cell" data-title="Location">
Brookline, MA
</div>
</div>
<div class="row">
<div class="cell" data-title="Name">
Joseph Smith
</div>
<div class="cell" data-title="Age">
27
</div>
<div class="cell" data-title="Occupation">
Project Manager
</div>
<div class="cell" data-title="Location">
Somerville, MA
</div>
</div>
<div class="row">
<div class="cell" data-title="Name">
Maxwell Johnson
</div>
<div class="cell" data-title="Age">
26
</div>
<div class="cell" data-title="Occupation">
UX Architect & Designer
</div>
<div class="cell" data-title="Location">
Arlington, MA
</div>
</div>
<div class="row">
<div class="cell" data-title="Name">
Harry Harrison
</div>
<div class="cell" data-title="Age">
25
</div>
<div class="cell" data-title="Occupation">
Front-End Developer
</div>
<div class="cell" data-title="Location">
Boston, MA
</div>
</div>
</div>
<div class="table">
<div class="row header green">
<div class="cell">
Product
</div>
<div class="cell">
Unit Price
</div>
<div class="cell">
Quantity
</div>
<div class="cell">
Date Sold
</div>
<div class="cell">
Status
</div>
</div>
<div class="row">
<div class="cell" data-title="Product">
Solid oak work table
</div>
<div class="cell" data-title="Unit Price">
$800
</div>
<div class="cell" data-title="Quantity">
10
</div>
<div class="cell" data-title="Date Sold">
03/15/2014
</div>
<div class="cell" data-title="Status">
Waiting for Pickup
</div>
</div>
<div class="row">
<div class="cell" data-title="Product">
Leather iPhone wallet
</div>
<div class="cell" data-title="Unit Price">
$45
</div>
<div class="cell" data-title="Quantity">
120
</div>
<div class="cell" data-title="Date Sold">
02/28/2014
</div>
<div class="cell" data-title="Status">
In Transit
</div>
</div>
<div class="row">
<div class="cell" data-title="Product">
27" Apple Thunderbolt displays
</div>
<div class="cell" data-title="Unit Price">
$1000
</div>
<div class="cell" data-title="Quantity">
25
</div>
<div class="cell" data-title="Date Sold">
02/10/2014
</div>
<div class="cell" data-title="Status">
Delivered
</div>
</div>
<div class="row">
<div class="cell" data-title="Product">
Bose studio headphones
</div>
<div class="cell" data-title="Unit Price">
$60
</div>
<div class="cell" data-title="Quantity">
90
</div>
<div class="cell" data-title="Date Sold">
01/14/2014
</div>
<div class="cell" data-title="Status">
Delivered
</div>
</div>
</div>
<div class="table">
<div class="row header blue">
<div class="cell">
Username
</div>
<div class="cell">
Email
</div>
<div class="cell">
Password
</div>
<div class="cell">
Active
</div>
</div>
<div class="row">
<div class="cell" data-title="Username">
ninjalug
</div>
<div class="cell" data-title="Email">
[email protected]
</div>
<div class="cell" data-title="Password">
************
</div>
<div class="cell" data-title="Active">
Yes
</div>
</div>
<div class="row">
<div class="cell" data-title="Username">
jsmith41
</div>
<div class="cell" data-title="Email">
[email protected]
</div>
<div class="cell" data-title="Password">
************
</div>
<div class="cell" data-title="Active">
No
</div>
</div>
<div class="row">
<div class="cell" data-title="Username">
1337hax0r15
</div>
<div class="cell" data-title="Email">
[email protected]
</div>
<div class="cell" data-title="Password">
************
</div>
<div class="cell" data-title="Active">
Yes
</div>
</div>
<div class="row">
<div class="cell" data-title="Username">
hairyharry19
</div>
<div class="cell" data-title="Email">
[email protected]
</div>
<div class="cell" data-title="Password">
************
</div>
<div class="cell" data-title="Active">
Yes
</div>
</div>
</div>
</div>
Css
body
font-family: 'Helvetica Neue', Helvetica, Arial
font-size: 14px
line-height: 20px
font-weight: 400
color: #3b3b3b
-webkit-font-smoothing: antialiased
font-smoothing: antialiased
background: #2b2b2b
@media screen and (max-width: 580px)
font-size: 16px
line-height: 22px
.wrapper
margin: 0 auto
padding: 40px
max-width: 800px
.table
margin: 0 0 40px 0
width: 100%
box-shadow: 0 1px 3px rgba(0,0,0,0.2)
display: table
@media screen and (max-width: 580px)
display: block
.row
display: table-row
background: #f6f6f6
&:nth-of-type(odd)
background: #e9e9e9
&.header
font-weight: 900
color: #ffffff
background: #ea6153
&.green
background: #27ae60
&.blue
background: #2980b9
@media screen and (max-width: 580px)
padding: 14px 0 7px
display: block
&.header
padding: 0
height: 6px
.cell
display: none
.cell
margin-bottom: 10px
&:before
margin-bottom: 3px
content: attr(data-title)
min-width: 98px
font-size: 10px
line-height: 10px
font-weight: bold
text-transform: uppercase
color: #969696
display: block
.cell
padding: 6px 12px
display: table-cell
@media screen and (max-width: 580px)
padding: 2px 16px
display: block
Author
Luke Peters
Demo
See the Pen CSS Responsive Table Layout by Luke Peters (@lukepeters) on CodePen.