Index columns are not large enough

[mwouts]

The 'date' column in the example below is not large enough and its content does not appear in full:

from itables import show
import pandas as pd

df = pd.DataFrame({'a':0, 'b':1}, index=pd.date_range('2000-01-01', freq='1min', periods=1000, name='time'))
show(df)

[mwouts]

The corresponding HTML code is

</style>
<div class="itables">
<table id="fe5e1340-f229-4a06-bac6-a6d3c697ee32" class="display"style="width:auto;"><thead>
    <tr style="text-align: right;">
      <th></th>
      <th>a</th>
      <th>b</th>
    </tr>
    <tr>
      <th>date</th>
      <th></th>
      <th></th>
    </tr>
  </thead><tbody><tr><td>Loading... (need <a href=https://mwouts.github.io/itables/troubleshooting.html>help</a>?)</td></tr></tbody></table>
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.13.1/css/jquery.dataTables.min.css">
<script type="module">
    // Import jquery and DataTable
    import 'https://code.jquery.com/jquery-3.6.0.min.js';
    import dt from 'https://cdn.datatables.net/1.12.1/js/jquery.dataTables.mjs';
    dt($);

    // Define the table data
    const data = [["2000-01-03", 0, 1], ["2000-01-04", 0, 1]];

    // Define the dt_args
    let dt_args = {};
    dt_args["data"] = data;

    $(document).ready(function () {

        $('#fe5e1340-f229-4a06-bac6-a6d3c697ee32').DataTable(dt_args);
    });
</script>
</div>

which, displayed in Jupyter Lab with IPython.display.HTML, shows the same issue. However in a standard HTML file the table looks fine:

[mwouts]

Apparently the problem is specific to Jupyter Lab and Jupyter Notebook, and does not appear in e.g. Colab or VS Code.

Adding style="table-layout:auto" seems to resolve the issue:

from itables import show
import pandas as pd

df = pd.DataFrame({i:i for i in range(200)}, index=pd.date_range('2000-01-01', freq='15min', periods=1000, name='date'))
show(df, style="table-layout:auto", classes=["nowrap"], maxColumns=0)