Grid table does not word-wrap

Question

This is a question on Sphinx and read-the-docs. I have the grid table shown below. Can anybody help me because it does not word-wrap? The table becomes much wider than the screen width and it has a horizontal scroll bar. I would like the table to fit on my screen.

+-------------------------------------------------------------+-----------------------------------------------------+
| Credentials factory and extra properties                    | Explanation                                         |
+=============================================================+=====================================================+
| ``nl.nn.credentialprovider.PropertyFileCredentialFactory``  | Credentials from properties file.                   |
|   with ``credentialFactory.map.properties``                 |   ``credentialFactory.map.properties`` holds the    |
|                                                             |   name of the file with usernames and passwords.    |
|                                                             |   See above example for file contents.              |
+-------------------------------------------------------------+-----------------------------------------------------+
| ``nl.nn.credentialprovider.FileSystemCredentialFactory``    | Username and password in separate text files.       |
|   with ``credentialFactory.filesystem.usernamefile``,       |   The properties are names of files holding the     |
|   ``credentialFactory.filesystem.passwordfile`` and         |   username and the password. The paths in           |
|   ``credentialFactory.filesystem.root``. Default values     |   ``credentialFactory.filesystem.usernamefile``     |
|   ``username``, ``password`` and ``/etc/secrets``.          |   and ``credentialFactory.filesystem.passwordfile`` |
|                                                             |   are relative to the path in                       |
|                                                             |   ``credentialFactory.filesystem.root``.            |
+-------------------------------------------------------------+-----------------------------------------------------+
| ``nl.nn.credentialprovider.AnsibleVaultCredentialFactory``  | Credentials in Ansible vault. The extra             |
|   with ``credentialFactory.ansibleVault.vaultFile`` and     |   properties hold the vault file and the key file.  |
|   ``credentialFactory.keyFile``.                            |                                                     |
+-------------------------------------------------------------+-----------------------------------------------------+
| ``nl.nn.credentialprovider.WebSphereCredentialFactory``,    | Credentials configured in Websphere Application     |
|   no additional properties.                                 |   Server.                                           |
+-------------------------------------------------------------+-----------------------------------------------------+

At the time I am writing this, you can see the rendered table at https://frank-manual.readthedocs.io/en/credentials/deploying/credentials.html. I intend to keep this online until at least Tuesday October 5 2021. The cell containing nl.nn.credentialprovider.FileSystemCredentialFactory seems to be the culprit.

I have Sphinx version 4.0.0 and sphinx-rtd-theme version 0.5.2

With kind regards,

Martijn Dirkse

Answer 1

You need to override the default style sheet with a custom style.

From Adding Custom CSS or JavaScript to Sphinx Documentation:

If your custom stylesheet is _static/css/custom.css, you can add that CSS file to the documentation using the Sphinx option html_css_files:

conf.py

# These folders are copied to the documentation's HTML output
html_static_path = ['_static']

# These paths are either relative to html_static_path
# or fully qualified paths (eg. https://...)
html_css_files = [
    'css/custom.css',
]

css/custom.css

.wy-table-responsive table td, .wy-table-responsive table th {
    white-space: inherit;
}