responsive table

by peterbenoit

HTML

<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
</head>
<body>
  
  <h1>Topic Title</h1>
         
<p><strong>Pellentesque habitant morbi tristique</strong> senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. <em>Aenean ultricies mi vitae est.</em> Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, <code>commodo vitae</code>, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. <a href="#">Donec non enim</a> in turpis pulvinar facilisis. Ut felis.</p>
  
  
  <table class="emp-sales">
    <caption>Wide Datatable</caption>
    <thead>
      <tr>
        <td></td>
        <th scope="col">title 1</th>
        <th scope="col">title 2</th>
        <th scope="col">title 3</th>
        <th scope="col">title 4</th>
        <th scope="col">title 5</th>
        <th scope="col">title 6</th>
        <th scope="col">title 7</th>
        <th scope="col">title 8</th>
        <th scope="col">title 9</th>
        <th scope="col">title 10</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <th scope="row">Pete</th>
        <td>190</td>
        <td>160</td>
        <td>40</td>
        <td>120</td>
        <td>30</td>
        <td>70</td>
        <td>40</td>
        <td>120</td>
        <td>30</td>
        <td>70</td>
      </tr>
      <tr>
        <th scope="row">JP</th>
        <td>3</td>
        <td>40</td>
        <td>30</td>
        <td>45</td>
        <td>35</td>
        <td>49</td>
        <td>30</td>
        <td>45</td>
        <td>35</td>
        <td>49</td>
      </tr>
      <tr>
        <th scope="row">David</th>
        <td>10</td>
        <td>180</td>
        <td>10</td>
        <td>85</td>
        <td>25</td>
        <td>79</td>
        <td>10</td>
        <td>85</td>
       ...

CSS

body { 
    font: 62.5%/1.3 normal Helvetica, sans-serif;
}
  p {
    font-size: 1.6em;
  } 
  h1 {
    font-size: 1.9em; 
  }
table {
    border-collapse: collapse;
    width: 100%;
}
  p, h1 {
    margin: 2em 0; 
  }
td, th { 
   text-align: center; 
   border: 1px solid #ddd; 
   padding:.5em 5px;
    font-size: 1.2em;
}
  th { 
    background-color:#f4f4f4;
    font-weight: normal;
  } 
caption {
    margin: 0; 
    font-weight: bold; 
    font-size: 1.3em; 
    background: #eee;
    padding: 10px;
    border: 1px solid #ddd; 
 }

  
  /* queries */
@media screen and (max-width: 480px){
   
  html:not(.emp-sales) .emp-sales th, 
  html:not(.emp-sales) .emp-sales td {
    font-size: 0;
    padding: 0;
    content: "";
    height: 7px;
  }
  html:not(.emp-sales) table {
    position: relative; 
    overflow: hidden;
  }
  html:not(.emp-sales) table:before {
    content: "Table: Tap to View";
    position: absolute;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,.6);
    color: #fff;
    font-weight: bold;
    font-size: 1.6em;
    text-align: center;
    vertical-align: middle;
    z-index: 100;
    font-family: Helvetica, sans-serif;
 
  }
 html.emp-sales table:before {
    content: "";
    display: block;
    background: #333;
    padding: 10px;
  }
  
  html.emp-sales table:before{
    content: "Back";
    position: absolute;
    top: 0;
    left: 15px;
    padding: .5em 1em;
    margin: 10px 0;
    font-weight: bold;
    color: #fff;
    background: #000;
    border: 1px solid #fff;
  }
   /* around here we could use the HTML class to hide all other content on the page aside from the table */
  html.emp-sales p, html.emp-sales h1 {
    display: none; 
  }
 
 }

JavaScript

$(function(){
  $("table").on("click", function(){
    $("html").toggleClass( $(this).attr("class") );
  });
});