Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<html>
<head>
<title>Mobile First Responsive Faux Table</title
</head>
<body>
<h1>Mobile First Responsive Faux Table</h1>
<p>Trying a &#8220;mobile first&#8221; definition list based version 
of <a href="http://css-tricks.com/examples/ResponsiveTables/responsive.php">
Responsive Tables from CSS Tricks</a>.</p>
<!-- 
    semantically meaningless container div makes me a sad panda
!-->
<div class="faux-table">
<!-- 
    hacky clone of 1st DL. i'd love to get rid of this entirely. but
    i think i'd be more comfortable doing something like this in a 
    production environment using Modernizr and jQuery (or the 
    javascript solution of your choice). the reason we need this is
    the DL contains both our header row (as DTs) and our first data
    row (as DDs). if it's possible to get a single DL to behave as
    2 table rows then it's beyond my current CSS-fu level
    while we're discussing my mental deficiencies, anyone out there
    know how hard it would be to add effects like sortable columns
    to a solution like this? 
!-->
<dl class="clone">
<dt>First Namzsdse</dt>
    <dd>James</dd>
<dt>Last Name</dt>
    <dd>Matman</dd>
<dt>Job Title</dt>
    <dd>Chief Sandwich Eater</dd>
<dt>Favorite Color</dt>
    <dd>Lettuce Green</dd>
<dt>Wars or Trek?</dt>
    <dd>Trek</dd>
<dt>Porn Name</dt>
    <dd>Digby Green</dd>
<dt>Date of Birth</dt>
    <dd>January 13, 1979</dd>
<dt>Dream Vacation City</dt>
    <dd>Gotham City</dd>
<dt>GPA</dt>
    <dd>3.1</dd>
<dt>Arbitrary Data</dt>
    <dd>RBX-12</dd>
</dl>
w
<!-- 
    definition lists as table rows. it's turtles all the way down. 
!-->
<dl>
<dt>First Name</dt>
    <dd>James</dd>
<dt>Last Name</dt>
    <dd>Matman</dd>
<dt>Job Title</dt>
    <dd>Chief Sandwich Eater</dd>
<dt>Favorite Color</dt>
    <dd>Lettuce Green</dd>
<dt>Wars or Trek?</dt>
    <dd>Trek</dd>
<dt>Porn Name</dt>
    <dd>Digby Green</dd>
<dt>Date of Birth</dt>
    <dd>January 13, 1979</dd>
<dt>Dream Vacation City</dt>
    <dd>Gotham City</dd>
<dt>GPA</dt>
    <dd>3.1</dd>
<dt>Arbitrary Data</dt>
    <dd>RBX-12</dd>
</dl>
​
<dl>
<dt>First Name</dt>
    <dd>The</dd>
<dt>Last Name</dt>
    <dd>Tick</dd>
<dt>Job Title</dt>
    <dd>Crimefighter Sorta</dd>
<dt>Favorite Color</dt>
    <dd>Blue</dd>
<dt>Wars or Trek?</dt>
    <dd>Wars</dd>
<dt>Porn Name</dt>
    <dd>John Smith</dd>
<dt>Date of Birth</dt>
    <dd>July 19, 1968</dd>
<dt>Dream Vacation City</dt>
    <dd>Athens</dd>
<dt>GPA</dt>
    <dd>N/A</dd>
<dt>Arbitrary Data</dt>
    <dd>Edlund, Ben (July 1996).</dd>
</dl>
​
<dl>
<dt>First Name</dt>
    <dd>Jokey</dd>
<dt>Last Name</dt>
    <dd>Smurf</dd>
<dt>Job Title</dt>
    <dd>Giving Exploding Presents </dd>
<dt>Favorite Color</dt>
    <dd>Smurflow</dd>
<dt>Wars or Trek?</dt>
    <dd>Smurf</dd>
<dt>Porn Name</dt>
    <dd>Smurflane Smurfmutt</dd>
<dt>Date of Birth</dt>
    <dd>Smurfuary Smurfteenth, 1945 </dd>
<dt>Dream Vacation City</dt>
    <dd>New Smurf City </dd>
<dt>GPA</dt>
    <dd>4.Smurf </dd>
<dt>Arbitrary Data</dt>
    <dd>One</dd>
</dl>
​
<dl>
<dt>First Name</dt>
    <dd>Cindy</dd>
<dt>Last Name</dt>
    <dd>Beyler </dd>
<dt>Job Title</dt>
    <dd>Sales Representative </dd>
<dt>Favorite Color</dt>
    <dd>Red </dd>
<dt>Wars or Trek?</dt>
    <dd>Wars </dd>
<dt>Porn Name</dt>
    <dd>Lori Quivey</dd>
<dt>Date of Birth</dt>
    <dd>July 5, 1956 </dd>
<dt>Dream Vacation City</dt>
    <dd>Paris </dd>
<dt>GPA</dt>
    <dd>3.4 </dd>
<dt>Arbitrary Data</dt>
    <dd>3451</dd>
</dl>
​
<dl>
<dt>First Name</dt>
    <dd>Captain </dd>
<dt>Last Name</dt>
    <dd>Cool </dd>
<dt>Job Title</dt>
    <dd>Tree Crusher </dd>
<dt>Favorite Color</dt>
    <dd>Blue</dd>
<dt>Wars or Trek?</dt>
    <dd>Wars </dd>
<dt>Porn Name</dt>
    <dd>Steve 42nd</dd>
<dt>Date of Birth</dt>
    <dd>December 13, 1982 </dd>
<dt>Dream Vacation City</dt>
    <dd>Las Vegas </dd>
<dt>GPA</dt>
    <dd>1.9 </dd>
<dt>Arbitrary Data</dt>
    <dd>Under the couch</dd>
</dl>
</div>
</body>
</html>
Output

This bin was created anonymously and its free preview time has expired (learn why). — Get a free unrestricted account

Dismiss x
public
Bin info
anonymouspro
0viewers