CODEWITHSUNDEEP
htmlcsspython-sphinxrestructuredtextread-the-docs
PeetsB
PeetsB

Reputation: 73

How to reduce font size for a specific table in Sphinx with ReadTheDocs theme?

I am using Sphinx with the ReadTheDocs theme (sphinx_rtd_theme), and I need to reduce the font size of a specific table while keeping other tables unchanged.

I tried using:

.. list-table:: Issues & To Do's
   :font-size: 10
   :widths: 15 10 15 25 20 15
   :header-rows: 1

   * - Date
     - Issue or To Do
     - Title
     - Description
     - Action
     - Closed
   * - 03/02/2025
     - Issue
     - Hyperlinks
     - document.xml.rels
     - check with Beeblebrox
     - infinity date

However, the :font-size: option does not exist in list-table, and the ReadTheDocs theme forces tables inside .wy-table-responsive, which overrides any styling.

How can I reduce the font size of only one table in Sphinx with ReadTheDocs?

Upvotes: 0

Views: 33

Answers (1)

PeetsB
PeetsB

Reputation: 73

You can apply a custom CSS class to a specific table using .. rst-class:: and override ReadTheDocs’ styles in a custom.css file.

Step 1: Modify Your reStructuredText File

Use .. rst-class:: small-table to apply a CSS class to the table:

.. rst-class:: small-table

   .. list-table:: Issues & To Do's
      :widths: 15 10 15 25 20 15
      :header-rows: 1

      * - Date
        - Issue or To Do
        - Title
        - Description
        - Action
        - Closed
      * - 03/02/2025
        - Issue
        - Hyperlinks
        - document.xml.rels
        - check with Beeblebrox
        - infinity date

Indenting .. list-table:: ensures that small-table only applies to this specific table, preventing unintended formatting changes elsewhere.

Step 2: Add Custom CSS

Create or edit _static/custom.css to override ReadTheDocs’ styles:

/* Reduce font size for a specific table inside ReadTheDocs theme */
.wy-table-responsive table.small-table {
    font-size: 14px !important;  /* Table title */
}

/* Reduce text size inside table cells */
.wy-table-responsive table.small-table td p,
.wy-table-responsive table.small-table th p { 
    font-size: 10px !important;
    margin: 0; /* Remove extra spacing */
}

/* Reduce font size of table headers */
.wy-table-responsive table.small-table th {
    font-size: 12px !important;
    font-weight: normal; /* Optional: Reduce boldness */
}

Step 3: Load the Custom CSS in Sphinx

In conf.py, add:

html_css_files = [
    'custom.css',
]

Step 4: Rebuild Documentation

Run:

make html

Expected Result • Table Title (Caption) → 14px • Headers → 12px • Cell Content → 10px • Other tables remain unaffected

Upvotes: 1

Related Questions