jQuery Responsive Table Wrapper

We supplement the articles with small notes that may come in handy someday.

Today we are adding a small script to add a wrapper div with a certain style to the table tag at a certain screen resolution.

<script>
	jQuery(document).ready(function($) {
		if ($(window).width() < 426) {
		   $('table').wrap('<div style="overflow-x:auto;"></div>');
		}
	});
</script>

Specifically, this option helps to get rid of unnecessary scrolling of tables, which often become a headache in adaptive layout.

Plain text

  • No HTML tags allowed.
  • Lines and paragraphs break automatically.
  • Web page addresses and email addresses turn into links automatically.
The comment language code.