Dynamic Responsive Tables with Bootstrap 3

The following function will force the table-responsive behavior in Bootstrap 3 when the table's width exceeds the window's, and while the window size is > 768 pixels.

Bootstrap's default of 768 pixels is great in most cases, however I've encountered some requirements where I need to squeeze large amounts of data into one row. This requirement led me to develop this function as a solution.

Force Responsive Tables Function

// This will always make the table responsive.
function forceResponsiveTables() {
  var windowSize = $(window).width();
  if ($('.table-responsive > .table').length > 0) {
    $.each($('.table-responsive > .table'), function (index, value) {
      var thisTable = $(value);
      var tableSize = thisTable.width();
      var parent = thisTable.parent('.table-responsive');
      // 768px is the default for bootstrap 3's responsive-table, modify if needed
      if (windowSize <= 768) {
        parent.css('width', '').css('overflow-x', '').css('overflow-y', '').css('margin-bottom', '').css('border', '');
      } else {
        if (tableSize >= windowSize) {
          // Change the border color based on the bootstrap theme colors
          parent.css('width', '100%').css('overflow-x', 'scroll').css('overflow-y', 'hidden').css('margin-bottom', '15px').css('border', '1px solid #DDDDDD');
        } else {
          parent.css('width', '').css('overflow-x', '').css('overflow-y', '').css('margin-bottom', '').css('border', '');
        }
      }
    });
  }
}

jQuery Example

$(document).ready(function () {
 $(window).resize(forceResponsiveTables);
 forceResponsiveTables(); 
});