properdocs-theme-mkdocs: don’t unconditionally add Bootstrap styles to tables

[reidpr]

Summary

The built-in theme properdocs-theme-mkdocs has JavaScript that adds the Bootstrap classes table, table-striped, and table-hover to all <table> tags. This behavior is unconditional for all tables, whether in page content or replaced template blocks, and it’s difficult to turn off.

Steps to reproduce

Add the following to your page:

|foo|bar|
|---|---|
|a  |b  |

<table>
   <tr>
      <td>foo</td>
   </tr>
</table>

or to your template override main.html:

{%- block footer %}
<table>
   <tr>
      <td>bar</td>
   </tr>
</table>
{%- endblock %}

Actual behavior

All three of these tables end up with the classes table, table-striped, and table-hover, and therefore all the Bootstrap table fanciness. (See js/base.sj:83.)

Expected behavior

The Bootstrap table class additions are optional somehow. For example, add class plain to opt out of the additional classes:

|foo|bar|
|---|---|
|a  |b  |
{: .plain }

<table class=plain>
   <tr>
      <td>foo</td>
   </tr>
</table>

{%- block footer %}
<table class=plain>
   <tr>
      <td>bar</td>
   </tr>
</table>
{%- endblock %}

Comments

I get why the classes are added to Markdown tables, but it doesn’t make sense to me in theme, which is at the HTML level already, i.e. if one wanted a table like that it’s easy to add the classes.

My own use case is a self-styled table in the footer. My workaround is to remove the offending classes manually if class no-boot is also present:

extra_javascript:
  - js/table_fix.js

document.addEventListener("DOMContentLoaded", () => {
   document.querySelectorAll("table.no-boot").forEach(t => {
      t.classList.remove("table", "table-striped", "table-hover");
   });
});

I’d personally prefer the Bootstrap additions to be opt-in, but backwards compatibility probably demands opt-out.

Bootstrap docs say the table stuff is “opt-in”, which is a bit confusing because this theme is the opposite.