Using Javascript to Force HTML Table Width to Always Be 100%

You are here

Using Javascript and jQuery  you can force tables with width greater than 900px to have a width of 100%. If the width > 900px the jQuery and Javascript replaces is with 100%.

<script type="text/javascript" src="//code.jquery.com/jquery-1.8.3.js"></script>
<script type='text/javascript'>
//<![CDATA[
$(function(){
'use strict';
var contentWidth = $('.CLASS-OF-MAIN-DIV').width();
$('table').each(function(i, table) {
  var CLASS-OF-MAIN-DIVtableWidth;
  table = $(table);
  CLASS-OF-MAIN-DIVtableWidth = table.width();

//if (CLASS-OF-MAIN-DIVtableWidth > contentWidth) {
       
if (CLASS-OF-MAIN-DIVtableWidth > 900) {
// if the width of the table is > 900px then
// force it to be with 100%
    table.css('width', '100%');

  }

});
});
//]]>
</script>

<style>
.CLASS-OF-MAIN-DIV {
max-width: 1200px;   
}
</style>