How can I remove empty line in table header and multi-line cell in sphinx_rtd_theme?

Question

I am trying to make an HTML document in sphinx_rtd_theme. I want to make a table containing a multi-line cell, so I added a code like

+----------+----------+----------+
| header 1 | header 2 | header 3 |
+==========+==========+==========+
| a        | | b1     | c        |
|          | | b2     |          |
+----------+----------+----------+

As a result, I get an HTML file that looks like the following image:

There are blank lines in the header row and the second row. They make the table ugly so I want to remove those empty lines. Is there anything I can do this? Thank you for reading my question.

You will need to apply a custom style to this table. I am not sure where the extra space comes in for the table headers. The line-block in the table body's second column adds a margin-bottom that you will want to remove. See also https://stackoverflow.com/a/48694716/2214933 — Steve Piercy, Dec 19 '20 at 08:24
Thank very much you for your comment. I understand that I should apply a custom style with a CSS file. However, I want to do it with a grid table, not a csv-table. Is it impossible to remove the empty line with the grid table type? — jk ha, Dec 22 '20 at 08:11
Custom styles apply to any HTML table, regardless of its source in reStructuredText. — Steve Piercy, Dec 24 '20 at 10:44
Thank you very much! I solved the problem with an indirect way using a css file. — jk ha, Feb 09 '21 at 09:47
care to share the .css you've used with the rest of us who struggle with this? — Dare The Darkness, Oct 18 '21 at 00:20
I am sorry for late response to your request.. I posted the contents of the .css file in the answer. @DareTheDarkness — jk ha, Dec 30 '21 at 12:01

score 1 · Answer 1 · edited Dec 31 '21 at 11:14

I solved the problem by adding

html_static_path = ['_static']
def setup(app):
    app.add_stylesheet('custom.css')

in conf.py, and:


/* Table appearance */
.wy-table-responsive table td, .wy-table-responsive table th {
    /* !important prevents the common CSS stylesheets from
       overriding this as on RTD they are loaded after this stylesheet */
    white-space: normal !important;
}

.wy-table-responsive {
    overflow: visible !important;
}

in the _static/custom.css, I think the above code is copied from here.

In a way, there was already an answer to my question, but it took some time to realize that, due to my lack of knowledge on html/css and sphinx.

Anyway, thanks to Steve Piercy for help in the comment.

How can I remove empty line in table header and multi-line cell in sphinx_rtd_theme?

1 Answers1