When printing a DataFrame table in a markdown file that was converted from a Jupyter notebook using nbconvert, the table data may not be displayed as it is raw HTML.

Instead of allowing all raw html to be displayed which may open up a security risk you can instead surround the code with a shortcode to display raw HTML.

• Use a shortcode contain {{ .Inner }} to display the raw HTML code.
• Add some styling to the CSS style file to style tables with the “dataframe” class.
• Alternatively add a bootstrap class to the table tag.

I added some styling for the class dataframe to the style CSS.

See CSS tables

Here is a dataframe table from a Jupyter notebook.

Example 1 table-responsive-sm

---

Here is another pandas DataFrame table from a Jupyter notebook. This is one where I used the pandas dataframe style option style.hide_index() to not display the index column. It does not have the same table class as the ordinary pandas DataFrames. I am manually adding the table class to the table. This will need to be automated but at least the table output looks nice for now. I guess you would be editing the notebook anyway so it is not such a big deal to add the shortcode. I will learn how to do the shortcode which will include the class and styling of the dataframe tables.s

Example 2 Table surrounded with div class table-responsive-md

---

Example 3 wrapped in div tag with class table-responsive-md

Here is a pandas DataFrame, I cut the style tags at the top and added the bootstrap class “table-sm table-responsive-lg table-striped” to the opening table tag.

Wrapped in div tag with class table-responsive-sm

---

Bootstrap Layout Containers I amended the baseof template to use the Bootstrap container <div class="container-fluid">. .container-fluid is width: 100% at all breakpoints. This will span the entire width of the viewport.