In Drupal, when you use Markdown module and Bootstrap theme, a Markdown table is rendered as <table>
without any class.
In order for Bootstrap to recognize it as a table, a table class needs to be added in the table element, e.g. <table class="table">
.
There are multiple ways to do this. The simplest way that I found is to use JavaScript.
Use JavaScript to add the class
Edit .../themes/YOUR_THEME/YOUR_THEME.libraries.yml to add the followings:
global-styling: js: js/markdown.js: {}
It will tell Drupal to load js/markdown.js file.
In markdown.js, use JavaScript to add your desired Bootstrap class for the table. For my case, I prefer table table-striped
classes.
(function ($, Drupal) { Drupal.behaviors.YOUR_THEME = { attach: function (context, settings) { // Add your Javascript code here. $('article div.content table').addClass('table table-striped'); } }; })(jQuery, Drupal);
For the changes to take effect, log in your Drupal and navigate to Configuration > Performance. Then, clear your cache.