Control width of table, search, tabulation, etc in an HTML report.

[bbusemeyer]

Thanks for the great library. I'm trying to export a notebook as an HTML report, but I find that the entire section generated by itables (including search, tabulation buttons etc) is in a container that expands with the width of the window. On a wide screen, this causes the elements to be very spaced apart, and the table is centered and unaligned with anything else in the report.

Is there an easy way to set a max width on the div that is containing everything that itables generates?

Apologies if this is a trivial question, I'm totally inexperienced in CSS and HTML (and datatables), and I couldn't figure it out.

[mwouts]

Hey @bbusemeyer , thank you for reporting this. A starting point might be https://mwouts.github.io/itables/advanced_parameters.html#position-and-width

Would you mind giving it a try and let us know what worked for you?

[bbusemeyer]

Thanks, this does indeed shrink the table itself and move it to the side, unfortunately, the other elements, like the search bar, the "show 10 entries" and the pagination buttons remain spread to the edges of the screen. I think I need the div container for all these things to be constrained to a fixed width.

[mwouts]

Hey @bbusemeyer , just to mention, you might be able to do that with a Ninja template for jupyter nbconvert, cf. the nbconvert documentation, at least if it is the output_prompt div that you want to change.

In particular I see this blog post that might help: https://www.frankcleary.com/exporting-static-ipython-notebooks-with-style/

For completeness, itables generates its own div using this template: datatables_template.html which is then formatted in this function: https://github.com/mwouts/itables/blob/main/itables/javascript.py#L239

[mwouts]

Closing as this is documented here: https://mwouts.github.io/itables/custom_css.html#position-and-width