While working on another post, I had some very large tables and I wanted to use Bootstrap Responsive Tables by adding the .table-responsive
class but only in the situation where the table is too wide.
This is the code I used. I added it to the page using the Genesis Body Scripts meta box (because I’m using a Genesis theme).
<script>
(function() {
var articles = document.getElementsByTagName('article'),
i, allTables, tooWideTables;
for (i=0; i<articles.length; i++) {
var allTables = articles[i].getElementsByTagName('table'),
tooWideTables = [].slice.call(allTables).filter(
function(table) { return articles[i].clientWidth < table.clientWidth; }
);
tooWideTables.forEach(function(table) {
table.className += ' table table-small table-responsive';
});
}
})();
</script>
Leave a Reply