• Skip to primary navigation
  • Skip to main content
Sal Ferrarello
  • About Sal Ferrarello
  • Speaking
  • Connect
    Twitter GitHub
You are here: Home / Draft / Conditionally Add Bootstrap Table Responsive Class

Conditionally Add Bootstrap Table Responsive Class

Last updated on April 16, 2019 by Sal Ferrarello

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>
Sal Ferrarello
Sal Ferrarello (@salcode)
Sal is a PHP developer with a focus on the WordPress platform. He is a conference speaker with a background including Piano Player, Radio DJ, Magician/Juggler, Beach Photographer, and High School Math Teacher. Sal can be found professionally at WebDevStudios, where he works as a senior backend engineer.

Share this post:

Share on TwitterShare on FacebookShare on LinkedInShare on EmailShare on Reddit
Warning! This is a draft, not a finalized post. See full draft disclosure.

Filed Under: Dev Tips, Draft, Solution Tagged With: Bootstrap, Genesis, WordPress

Reader Interactions

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

Copyright © 2022 · Bootstrap4 Genesis on Genesis Framework · WordPress · Log in