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>