Most users that are responsible for content management in the system are familiar with inserting standard tables in our WYSIWYG editor. This process is pretty much the same for most WYSIWYG editors. Choose 'table' from the menu, determine the width and amount of columns/rows in said table.
The tough part is out-of-the-box, these tables have what we call “fixed widths.” So if your table is set to 700px width then it will remain at 700px width, regardless of the screen size or device your users are on. This causes information to bleed off the screen at times and can create a less than desirable user experience.
Enter Bootstrap’s responsive tables. Bootstrap is the most highly-used open-source CSS framework on the web for a reason and it’s bundled into every new a2z site for users to leverage.
Taking advantage of responsive tables is as simple as these 3 steps:
Switch over to source code view simply by clicking the “Source” button on the WYSIWYG editor. This allows you to manipulate the html/css that controls how your pages look.
Discard all instances of fixed widths in your table. At the top of your table in source code view, there is probably a fixed width in pixels. Simply replace this width in pixels with "100%". So the final html would look like this.
<table border="0" cellpadding="1" cellspacing="1" style="width: 100%;">
Finally, include the Bootstrap CSS class of .table in the html. So your final html would like this:
<table class="table" border="0" cellpadding="1" cellspacing="1" style="width: 100%;">
Final thoughts:
Additionally, Bootstrap has various different table classes to leverage that will provide users different results. Visit getbootstrap.com/css/#tables to see all of these (copy & paste) examples at work.
Here is a simple list of them below:
.table.table-striped.table-bordered.table-hover.table-condensed.table-responsive
So now all of your content pages that contain tables will be responsive and display nice and clean for users at any screen size. Pretty cool right.