Javascript

Not sure what to call it, but it is awesome.

If a table’s width becomes greater than its container, this plugin wraps it in a div and allows it to scroll horizontally so that the page’s width doesn’t get messed up on mobile devices.

It also adds a message above the table indicating that it can be scrolled, for there are no scroll bars on mobile devices.

The Plugin:

(function($){$.fn.tableOverflow=function(options){var settings=$.extend({displayMessage:true,message:"&larr; scroll table left and right &rarr;"},options);$(window).resize(function(){$('.table-overflow-container').each(function(){if($(this).outerWidth()<$(this).find('table').outerWidth()){$(this).find('.table-overflow-msg').show()}else{$(this).find('.table-overflow-msg').hide()}})});return this.each(function(){$(this).wrap('<div class="table-overflow-container"/>');$(this).parent('.table-overflow-container').css({'margin':$(this).css('marginTop')+' '+0+' '+$(this).css('marginBottom'),'overflow':'auto'});if(settings.displayMessage){$(this).parent('.table-overflow-container').prepend('<p class="table-overflow-msg" style="display:none;font-size:0.8em;margin:0 0 0.5em;opacity:0.7;text-align:right;">'+settings.message+'</p>')};$(this).css('margin','0');if($(this).parent('.table-overflow-container').outerWidth()<$(this).outerWidth()){$(this).parent('.table-overflow-container').find('.table-overflow-msg').show()}})}}(jQuery));

Initialize:

$('table').tableOverflow();

You can initialize on all tables or be more specific and add a class like ‘table-overflow’.

$('table.table-overflow').tableOverflow();

It even has options:

displayMessage: true(default) | false,
message: “← scroll table left and right →”(default) | “Your own message”