Responsive Table

index.html

<h1>Responsive Table</h1>

<table class="table  table--responsive">
  <thead>
    <tr>
      <th>Name</th>
      <th>Twitter</th>
      <th>Website</th>
    </tr>
  </thead>
    
  <tr>
    <td data-th="Name">Stan Williams</td>
    <td data-th="Twitter">@Stanssongs</td>
    <td data-th="Website"><a href="http://stanwilliams.org" target="_blank">https://stanwilliams.org</a></td>
  </tr>
  <tr>
    <td data-th="Name">Stan Williams</td>
    <td data-th="Twitter">@Stanssongs</td>
    <td data-th="Website"><a href="https://stanwilliamsmusic.com" target="_blank">http://stanwilliamsmusic.com</a></td>
  </tr>
  <tr>
    <td data-th="Name">Stan Williams</td>
    <td data-th="Twitter">@Stanssongs</td>
    <td data-th="Website"><a href="http://stanwilliams.org" target="_blank">https://stanwilliams.org</a></td>
  </tr>
  <tr>
    <td data-th="Name">Stan Williams</td>
    <td data-th="Twitter">@Stanssongs</td>
    <td data-th="Website"><a href="http://swsitedesign.com" target="_blank">https://swsitedesign.com</a></td>
  </tr>
</table>

responsive-table.markdown

Responsive Table

A Pen by Stan Williams on CodePen.

License.

scripts

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>

style.less

@import "lesshat";

// Demo Styles
body {
  color:#fff;
    background-color: #000;
    padding: 30px;
}



// Default table styles
.table { 
  width: 100%; 
  background: #202020;
  border-collapse: collapse;

  // Zebra stripe the rows.
/*  tr {
    &:nth-of-type(odd) { 
      background: #f1f1f1; 
    }
    &:nth-of-type(even) { 
      background: #f6f6f6; 
    }
  }*/
  
  th {  
    color: #fff; 
    background: #333;
    font-weight: bold; 
  }
  td, th { 
    padding: 10px; 
    //border: 1px solid #fff; 
    text-align: left; 
  }
}



// Small screens
@media only screen and (max-width: 768px) {

  .table--responsive {

    table, thead, tbody, th, td, tr { 
      display: block; 
    }

    /* Hide table headers (but not display: none;, for accessibility) */
    thead tr { 
      position: absolute;
      top: -9999px;
      left: -9999px;
    }

    td { 
      border: none;
      border-bottom: 1px solid #fff; 
      position: relative;
      padding-left: 50%; 
    }

    td:before { 
      position: absolute;
      width: 45%;
      top: 6px;
      left: 6px;
      white-space: nowrap;
      content: attr(data-th);
      font-weight: bold;
      width: 6.5em;
      color: #3498db;
      display: inline-block;
    }    
  }

}
	


// Very small screens
@media only screen and (max-width : 480px) {
		
  .table--responsive {
    td { 
      border: none;
      border-bottom: 1px solid #fff; 
      position: relative;
      padding-left: 10px; 
      padding-top: 50px;
      padding-bottom: 10px;
    }

    td:before { 
      position: absolute;
      top: 20px;
      left: 10px;
      white-space: nowrap;
    }
  }
}

Demo / preview:
https://codepen.io/Stanssongs/full/rZBjBg/