Mobile-friendly Responsive Bootstrap Table with jQuery

A simple jQuery responsive table solution that automatically converts a table into a Bootstrap based accordion interface when the maximum screen width is reached.

How to use it:

1. Load jQuery library, Bootstrap 3 and modernizr.js in the document.

<script src="//cdnjs.cloudflare.com/ajax/libs/modernizr/2.8.3/modernizr.min.js"></script>
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<script src="//code.jquery.com/jquery-1.11.2.min.js"></script>
<script src="//netdna.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>

2. Create a table using DIVs instead of table.

<div class="divtable accordion-xs">
  <div class="tr headings">
    <div class="th firstname">First Name</div>
    <div class="th lastname">Last Name</div>
    <div class="th username">Username</div>
  </div>
  <div class="tr">
    <div class="td firstname accordion-xs-toggle">Mark</div>
    <div class="accordion-xs-collapse">
      <div class="inner">
        <div class="td lastname">Otto</div>
        <div class="td username">@mdo</div>
      </div>
    </div>
  </div>
  <div class="tr">
    <div class="td firstname accordion-xs-toggle">Jacob</div>
    <div class="accordion-xs-collapse">
      <div class="inner">
        <div class="td lastname">Thornton</div>
        <div class="td username">@fat</div>
      </div>
    </div>
  </div>
  <div class="tr">
    <div class="td firstname accordion-xs-toggle">Larry</div>
    <div class="accordion-xs-collapse">
      <div class="inner">
        <div class="td lastname">the Bird</div>
        <div class="td username">@twitter</div>
      </div>
    </div>
  </div>
</div>

3. The CSS for the DIV based table.

.divtable .tr {
  overflow: hidden;
  clear: both;
  border-bottom: 1px solid #ccc;
}

.divtable .th,
.divtable .td {
  padding: 5px 10px;
  float: left;
}

.divtable .th { font-weight: bold; }

.firstname { width: 40%; }

.lastname { width: 30%; }

.username { width: 30%; }

4. Style the accordion when the screen size is smaller than 768px.

@media (max-width: 767px) {

.accordion-xs .headings { display: none; }

.accordion-xs .tr { border-bottom-color: #fff; }

.accordion-xs .th,
 .accordion-xs .td {
  float: none;
  width: auto;
  padding: 0;
}

.accordion-xs .accordion-xs-toggle {
  background-color: orange;
  color: #fff;
  padding: 10px;
  cursor: pointer;
}

.accordion-xs .accordion-xs-toggle:hover { background-color: #e69500; }

.accordion-xs .accordion-xs-toggle:after {
  content: '\2b';
  float: right;
}

.accordion-xs .accordion-xs-toggle.collapsed:after { content: '\2212'; }

.accordion-xs-collapse .inner { padding: 10px; }

.accordion-xs-collapse .td:before { font-weight: bold; }

.accordion-xs-collapse .lastname:before { content: 'Last Name: '; }

.accordion-xs-collapse .username:before { content: 'Username: '; }

.accordion-xs .accordion-xs-toggle:after {
  position: relative;
  top: 1px;
  display: inline-block;
  font-family: 'Glyphicons Halflings';
  font-style: normal;
  font-weight: 400;
  line-height: 1;
  -webkit-font-smoothing: antialiased;
}
}

5. The JavaScript to enable the responsive table.

$(function() {    
  var isXS = false,
      $accordionXSCollapse = $('.accordion-xs-collapse');

  // Window resize event (debounced)
  var timer;
  $(window).resize(function () {
      if (timer) { clearTimeout(timer); }
      timer = setTimeout(function () {
          isXS = Modernizr.mq('only screen and (max-width: 767px)');
          
          // Add/remove collapse class as needed
          if (isXS) {
              $accordionXSCollapse.addClass('collapse');               
          } else {
              $accordionXSCollapse.removeClass('collapse');
          }
      }, 100);
  }).trigger('resize'); //trigger window resize on pageload    
  
  // Initialise the Bootstrap Collapse
  $accordionXSCollapse.each(function () {
      $(this).collapse({ toggle: false });
  });      
  
  // Accordion toggle click event (live)
  $(document).on('click', '.accordion-xs-toggle', function (e) {
      e.preventDefault();
      
      var $thisToggle = $(this),
          $targetRow = $thisToggle.parent('.tr'),
          $targetCollapse = $targetRow.find('.accordion-xs-collapse');            
    
      if (isXS && $targetCollapse.length) { 
          var $siblingRow = $targetRow.siblings('.tr'),
              $siblingToggle = $siblingRow.find('.accordion-xs-toggle'),
              $siblingCollapse = $siblingRow.find('.accordion-xs-collapse');
          
          $targetCollapse.collapse('toggle'); //toggle this collapse
          $siblingCollapse.collapse('hide'); //close siblings
          
          $thisToggle.toggleClass('collapsed'); //class used for icon marker
          $siblingToggle.removeClass('collapsed'); //remove sibling marker class
      }
  });
});

---

This awesome jQuery plugin is developed by imakewebsites. For more Advanced Usages, please check the demo page or visit the official website.