{ "cells": [ { "cell_type": "markdown", "id": "f57bc6d2", "metadata": {}, "source": [ "# CSS\n", "\n", "You can use CSS to alter how tables are rendered.\n", "\n", "For instance, we change the\n", "[font size](https://developer.mozilla.org/en-US/docs/Web/CSS/font-size)\n", "for all the tables in the document with this code:" ] }, { "cell_type": "code", "execution_count": 1, "id": "802b754d", "metadata": {}, "outputs": [ { "data": { "text/html": [ "" ], "text/plain": [ "" ] }, "metadata": {}, "output_type": "display_data" } ], "source": [ "from IPython.display import HTML, display\n", "\n", "css = \"\"\"\n", ".dt-container {\n", " font-size: small;\n", "}\n", "\"\"\"\n", "display(HTML(f\"\" \"\"))" ] }, { "cell_type": "markdown", "id": "1e7ba097", "metadata": {}, "source": [ "This is helpful for instance in the context of\n", "[Quarto presentations](apps/quarto.md).\n", "\n", "With this over CSS, we change _every datatable_ table header\n", "in the notebook to bold/italic." ] }, { "cell_type": "code", "execution_count": 2, "id": "0a888884", "metadata": {}, "outputs": [ { "data": { "text/html": [ "" ], "text/plain": [ "" ] }, "metadata": {}, "output_type": "display_data" } ], "source": [ "css = \"\"\"\n", ".dataTable th {\n", " font-weight: bolder;\n", " font-style: italic;\n", "}\n", "\"\"\"\n", "display(HTML(f\"\" \"\"))" ] }, { "cell_type": "markdown", "id": "8995b8df", "metadata": {}, "source": [ "You might also want to alter the style of specific tables only.\n", "To do this, add a new class to the target tables, as\n", "in the example below:" ] }, { "cell_type": "code", "execution_count": 3, "id": "576318fb", "metadata": {}, "outputs": [ { "data": { "text/html": [ "" ], "text/plain": [ "" ] }, "metadata": {}, "output_type": "display_data" } ], "source": [ "class_specific_css = \".table_with_monospace_font { font-family: courier, monospace }\"\n", "display(HTML(f\"\" \"\"))" ] }, { "cell_type": "code", "execution_count": 4, "id": "c9a1d9b3", "metadata": { "tags": [ "full-width" ] }, "outputs": [ { "data": { "text/html": [ "\n" ], "text/plain": [ "" ] }, "metadata": {}, "output_type": "display_data" }, { "data": { "text/html": [ "\n", "
\n", "\n", "\n", "
\n" ], "text/plain": [ "" ] }, "metadata": {}, "output_type": "display_data" }, { "data": { "text/html": [ "\n", "\n", " \n", "
\n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", "\n", " \n", " \n", " \n", " \n", "\n", " \n", " \n", " \n", " \n", "\n", " \n", " \n", " \n", " \n", "\n", " \n", " \n", " \n", " \n", " \n", " \n", "\n", "\n", " Loading ITables v2.4.0rc1 from the init_notebook_mode cell...\n", " (need help?)
\n", "\n" ], "text/plain": [ "" ] }, "metadata": {}, "output_type": "display_data" } ], "source": [ "import itables\n", "\n", "itables.init_notebook_mode()\n", "\n", "df = itables.sample_dfs.get_countries(html=False)\n", "\n", "itables.show(df, classes=\"display nowrap table_with_monospace_font\")" ] } ], "metadata": { "jupytext": { "formats": "md:myst", "notebook_metadata_filter": "-jupytext.text_representation.jupytext_version", "text_representation": { "extension": ".md", "format_name": "myst", "format_version": 0.13 } }, "kernelspec": { "display_name": "itables", "language": "python", "name": "itables" }, "language_info": { "codemirror_mode": { "name": "ipython", "version": 3 }, "file_extension": ".py", "mimetype": "text/x-python", "name": "python", "nbconvert_exporter": "python", "pygments_lexer": "ipython3", "version": "3.11.12" }, "source_map": [ 13, 23, 32, 40, 48, 54, 59 ] }, "nbformat": 4, "nbformat_minor": 5 }