vertical-align of text in multi-line table cells

[cjw296]

Looks like the behaviour is currently to leave the browser default, which is "middle? and makes multi-line tables of data hard to read.

For me, would be better if table cells had vertical-align set to top, what's the best way to achieve this?

[cjw296]

Are bumps frowned upon in this forum?

[pradyunsg]

Nope. Got a screenshot?

[cjw296]

Sure, here's the ReST source:

.. list-table:: Frozen Delights!
   :widths: 15 10 30
   :header-rows: 1

   * - Treat
     - Quantity
     - Description
   * - Albatross
     - 2.99
     - On a stick!
   * - Crunchy Frog
     - 1.49
     - Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
       incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
       exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute
       irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat
       nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui
       officia deserunt mollit anim id est laborum.
   * - Gannet Ripple
     - 1.99
     - On a stick!

Here's the rendering:

Crunch Frog and it's quantity should be at the top of the row. The "real" example I have is a tabular descriptions of a series of
data sets, but unfortunately they're proprietary so I can't share them, even though the readability issue is much more pronounced.

[cjw296]

Bump ;-)

[jdknight]

The browser-default vertical alignment (to the middle) seems to be consistent with most Sphinx-provided theme types. Although there looks to be an exception for the haiku theme. I assume it is just dealer's choice on the matter of which default alignment style is "right".

---

A workaround for this would be to configure a theme override, using the options (in conf.py):

html_static_path = ['_static']

def setup(app):
    app.add_css_file('theme_overrides.css')

With the contents of _static/theme_overrides.css to:

td {
    vertical-align: top;
}

This should configure table alignments in the same style as the haiku theme (although, I cannot say off hand if there are any implications of this on other table types).

Users wanting to only apply this on a specific table may instead define the alignment on a specific class:

.my-data-table td {
    vertical-align: top;
}

And add the class type into the table definition:

.. list-table:: Frozen Delights!
   :widths: 15 10 30
   :header-rows: 1
   :class: my-data-table

   * - Treat
     - Quantity
     - Description
...

[cjw296]

Thanks! I think I did similar to work around this...

I still think @pradyunsg would prefer to have this top-aligned in this theme. Like make browser/theme defaults, vertical center aligned on a multi-line cell is rarely what you want...

[pradyunsg]

I kinda don't really have strong feelings either way, TBH.

[pradyunsg]

Looking back at this, I don't think I wanna change how this works by default. I've marked @jdknight's reply as an "answer", for users who would prefer to change the behaviours here.