Skip to content

Instantly share code, notes, and snippets.

@webin

webin/responsive-tables.html

Forked from frederickweiss/index.html
Last active August 29, 2015 13:56
Show Gist options
  • Save webin/8909345 to your computer and use it in GitHub Desktop.
Save webin/8909345 to your computer and use it in GitHub Desktop.
Download ZIP
Responsive Tables
Raw
responsive-tables.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Responsive Tables</title>
<!-- viewport -->
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<!-- CSS -->
<link rel="stylesheet" href="style.css" type="text/css" />
<!-- JS -->
<!-- html5.js for IE less than 9 -->
<!--[if lt IE 9]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<!-- css3-mediaqueries.js for IE less than 9 -->
<!--[if lt IE 9]>
<script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script>
<![endif]-->
<script type="text/javascript" src="jquery-1.7.1.min.js"></script>
<!-- REPLACE TABLE JQUERY -->
<script type="text/javascript">
jQuery(document).ready(function() {
// REPLACE TABLE
$('table').replaceWith(function(){
return $("<div class='tablearea_table'/>").append($(this).contents());
});
// REPLACE TD
$('td').contents().unwrap().wrap('<div class="tablearea_cell"><div class="tablearea_cellitem">');
// REPLACE TH
$('th').contents().unwrap().wrap('<div class="tablearea_header"><div class="tablearea_cellitem">');
// REPLACE TR
$('tr').replaceWith(function(){
return $("<div class='tablearea_row'/>").append($(this).contents());
});
// REPLACE THEAD
$('thead').replaceWith(function(){
return $("<div class='tablearea_headerrow'/>").append($(this).contents());
});
// REPLACE TBODY
$('tbody').replaceWith(function(){
return $("<div class='tablearea_tbodyrow'/>").append($(this).contents());
});
// Odd and Even Classes
$('div.tablearea_row:nth-child(even)').addClass('odd_rows');//Rows
$('div.tablearea_cell:nth-child(even)').addClass('odd_columns');//Columns
// First Column TD
$('.tablearea_row .tablearea_cell:first-child').addClass('first');
});
</script>
</head>
<body>
<table>
<thead>
<tr>
<th>&nbsp;</th>
<th>IE</th>
<th>Firefox</th>
<th>Chrome</th>
<th>Safari</th>
<th>Opera</th>
<th>iOS Safari</th>
<th>Android Browser</th>
</tr>
</thead>
<tr>
<td>CSS 3</td>
<td>:p</td>
<td>:)</td>
<td>:)</td>
<td>:)</td>
<td>:)</td>
<td>:)</td>
<td>:)</td>
</tr>
<tr>
<td>Fun to use</td>
<td>:p</td>
<td>:)</td>
<td>:)</td>
<td>:)</td>
<td>:(</td>
<td>:)</td>
<td>:P</td>
</tr>
</table>
</body>
</html>
Raw
style.css
/* ======================================================================================================= */
/* RESET */
/* ======================================================================================================= */
:link,:visited {text-decoration:none;}
ul,ol {list-style:none;}
h1,h2,h3,h4,h5,h6,pre,code {font-size:small;}
ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,body,html,p,blockquote,fieldset,input, legend {margin:0;padding:0;}
a img,:link img,:visited img {border:none;}
address {font-style:normal;}
fieldset {border:none;}
* {margin:0px;padding:0px;outline:none;}
html {
margin:0px;padding:0px;
font-size:100.01%;
width:100%;height:100%;
}
body {
margin:0px;padding:0px;
background-color:#fff;
font:14px/20px Verdana, Arial, Helvetica, sans-serif;color:#666;
}
/* ======================================================================================================= */
/* Generic Styling, for Desktops/Laptops */
/* ======================================================================================================= */
table {
width: 100%;
border-collapse: collapse;
}
/* =============== Zebra striping =============== */
tr:nth-of-type(odd) {
background: #eee;
}
th {
background: #333;
color: white;
font-weight: bold;
}
td, th {
padding: 6px;
border: 1px solid #ccc;
text-align: left;
}
.first {color:#000;font-weight:bold;}
/* ======================================================================================================= */
/* TABLE REPLACE */
/* ======================================================================================================= */
.tablearea_table { /* TABLE */
display:block;overflow:hidden;clear:both;
width:100%;height:100%;
}
.tablearea_headerrow{ /* thead */
display:block;overflow:hidden;clear:both;
width:100%;
font-weight:bold;
}
.tablearea_tbodyrow{ /* tbody */
display:block;overflow:hidden;clear:both;
width:100%;
color:#35505f;
}
.tablearea_row{ /* tr */
display:block;overflow:hidden;clear:both;
padding:0px;
width:100%;height:4em;
}
.tablearea_header { /* th */
display:block;overflow:hidden;
float:left;
padding:0px;
text-align:center;
width:12%;height:4em;
background:#999 url(1.gif) right top repeat-y;
}
.tablearea_cell { /* td */
display:block;overflow:hidden;
float:left;
padding:0px;
text-align:center;
width:12%;height:4em;
background:url(1.gif) right top repeat-y;
}
.tablearea_cellitem {padding:2px 4px;}
.tablearea_row.odd_rows .tablearea_cel {background-color:#ccc;display:block;overflow:hidden;}
.tablearea_cell.odd_columns {/* Go Nutz */}
@media only screen and (max-width: 760px) {
.tablearea_headerrow{ /* thead */
display:block;overflow:hidden;clear:both;
width:100%;
font-weight:bold;
}
.tablearea_tbodyrow{ /* tbody */
display:block;overflow:hidden;clear:both;
width:100%;
color:#35505f;
}
.tablearea_row{ /* tr */
display:block;overflow:hidden;clear:both;
padding:0px;
width:100%;height:auto;
}
.tablearea_header {display:none;} /* th */
.tablearea_cell { /* td */
display:block;overflow:hidden;
padding-left:50%;
width:100%;height:auto;
background:none;
position:relative;
text-align:left;
}
.tablearea_cell:before {
position:absolute;top:6px;left:6px;
width:45%;
padding-right:10px;
white-space:nowrap;
}
.tablearea_cellitem {padding:2px 4px;}
.tablearea_row.odd_rows .tablearea_cell {background-color:#ccc;display:block;overflow:hidden;}
.tablearea_cell.odd_columns {/* Go Nutz */}
/* =============== Label the data =============== */
.tablearea_cell:nth-of-type(2):before { content: "IE"; }
.tablearea_cell:nth-of-type(3):before { content: "Firefox"; }
.tablearea_cell:nth-of-type(4):before { content: "Chrome"; }
.tablearea_cell:nth-of-type(5):before { content: "Safari"; }
.tablearea_cell:nth-of-type(6):before { content: "Opera"; }
.tablearea_cell:nth-of-type(7):before { content: "iOS Safari"; }
.tablearea_cell:nth-of-type(8):before { content: "Android Browser"; }
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment