Safari not rendering pandas Dataframes properly

[vstenby]

Hi!

I've been using mkdocs-jupyter to show Jupyter notebooks, but noticed that on my webpage, it doesn't render properly. It's the same issue with your demo (https://mkdocs-jupyter.danielfrg.com/demo-nb/).

macOS Monterey (12.5.1), , Safari Version 15.6.1 (17613.3.9.1.16)

iPadOS 16, Safari

If I use nbconvert to convert a local notebook to HTML and open it in Safari on my Mac, the problem is gone.

I therefore might think it's a problem with mkdocs-jupyter.

[vstenby]

Note: It is not a problem in Google Chrome.

[yeemh]

it's also problem in mobile chrome. (used iphone13 pro to test)

and I solved this problem by changing css. you can do it in extras/*.css.

.jupyter-wrapper table.dataframe {
  table-layout: auto !important;
}

or you can use overrides/main.html. (I used this way.)

{% extends "base.html" %}

{% block content %}
{% if page.nb_url %}
    <a href="{{ page.nb_url }}" title="Download Notebook" class="md-content__button md-icon">
        {% include ".icons/material/download.svg" %}
    </a>
{% endif %}

{{ super() }}

<style>
    .jupyter-wrapper table.dataframe {
        table-layout: auto;
    }
</style>
{% endblock content %}

[vstenby]

This fixes it @yeemh - great find, thanks!

Seeing as this might be the desired default setting of the user, maybe we should make a PR?

[yeemh]

But the solution is not in mkdocs-jupyter, so I'm not sure it's okay to make a PR.