Wide table handling is not flexible, how to override the CSS?

[smartass101]

I understand that wide tables need special handling in responsive designs. However, on a computer screen a table like this http://docs.getpelican.com/en/latest/settings.html#basic-settings is very inconvenient to read.

Any ideas how to address this inconvenience? I tried to override the CSS style for the table as described in https://github.com/getpelican/pelican/issues/1311 (specifically commit https://github.com/smartass101/pelican/commit/e1ee4c965946d489f3e79d138ccf76a685e9581b), but that works only locally. It would work well if I could get something like sphinx_rtd_theme.get_html_theme_path() on RTD, but I wasn't able to find the out what the theme path is on RTD.

If CSS overriding is not possible, would it be possible to add some theme setting that would disable the current wide table handling?

[KevinCathcart]

Until @snide can address the underlying concern, here is a workaround to easilly add custom CSS that should work just fine on the RTD site:

One simple approach to adding custom CSS is not to create a whole new theme, but simple drop a css file in _static. Then add a file named _template/layout.html that contains the following:

{% extends "!layout.html" %}
{% set css_files = css_files + ["_static/pelican.css"] %}

(Credit: http://stackoverflow.com/a/9738992/179917 )

[smartass101]

I found a solution that works without making a layout.html file. The solution is to only create a _static/theme_overrides.css (relative to conf.py):

/* override table width restrictions */
.wy-table-responsive table td, .wy-table-responsive table th {
    white-space: normal;
}

.wy-table-responsive {
    margin-bottom: 24px;
    max-width: 100%;
    overflow: visible;
}

and then in conf.py

html_static_path = ['_static']

html_context = {
    'css_files': [
        '_static/theme_overrides.css',  # overrides for wide tables in RTD theme
        ],
    }

[ericholscher]

The workaround that @smartass101 came up with is a good one. We should probably document this :)

[KevinCathcart]

@ericholscher: Actually, you might want to document something slightly different.

@smartass101: While setting css_files via html_context appears to work, it actually prevents any sphinx extensions from being able to register css files, because the value specified in html_context will override the preregistered list of css files. This is more noticeable when using script_files via html_context, since doing so causes jQuery to not be included!

Here is yet another alternative, which works just fine. It registers the extra files for inclusion in the same way as a sphinx extension would. Simply add this function to conf.py:

def setup(app):
   app.add_javascript("custom.js")
   app.add_stylesheet("custom.css")

Note the absence of the _static folder name. That is added automatically by the definitions of add_javascript and add_stylesheet.

[smartass101]

I was afraid something like that would bite me back eventually. Thank you @KevinCathcart for this cleaner solution that is also documented in Sphinx docs.

[snide]

Dunno how you guys want to me to handle this. If someone wants to update the readme or something with proper docs I'll merge it in. I'm just a design hack :)

[smartass101]

Unfortunately the fix by @KevinCathcart works only locally because on RTD the commond hosted CSS theme files get added after that the one specified by app.add_stylesheet

<link type="text/css" href="_static/theme_overrides.css" rel="stylesheet"></link>

<link type="text/css" href="https://media.readthedocs.org/css/sphinx_rtd_theme.css" rel="stylesheet"></link>

<link type="text/css" href="https://media.readthedocs.org/css/readthedocs-doc-embed.css" rel="stylesheet"></link>

[smartass101]

For the time being I solved this by declaring the overrides as !important

/* override table width restrictions */
.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;
}

[ericholscher]

Hmm. Yea, the calls to add_javascript get called before our own calls, so appear sooner in the list. Not sure the best workaround there.

On Mon, Apr 28, 2014 at 1:03 PM, Ondrej Grover [email protected]:

For the time being I solved this by declaring the overrides as !important

/* override table width restrictions */.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;}

— Reply to this email directly or view it on GitHubhttps://github.com/snide/sphinx_rtd_theme/issues/117#issuecomment-41606147 .

[kmike]

Thanks @smartass101 for providing a workaround!

Why not have relevant CSS fixed by default? Are there cases when it is desirable to truncate the information in table, be it a tablet screen or a computer screen? On tablets existing tables are even worse because horizontal scroll of individual elements is hard on touch interfaces. On macs there is no indication that table can be horizontally scrolled because scrollbars are hidden by default; they don't appear even on hover, you need to actually start scrolling to see the scrollbars.

[ghost]

I did not found a solution to include custom css files, and I changed layout.html like in sylius, removed this if

[binwiederhier]

@KevinCathcart's solution works just fine for me, see my conf.py

The order of the included files is avtually not that important, as long as the specificity of the CSS statement is higher: html body div.someclass ... > .someclass. See my theme_overrides.css.

Thanks!

[chfw]

@smartass101, your solution worked for my project. Thanks!

[danielquinn]

If I could make on addendum to this solution:

/* override table width restrictions */
@media screen and (min-width: 767px) {

  .wy-table-responsive table td {
    /* !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;
  }

}

This will enable scrolling for devices where it makes sense (phones and small tablets) and disable it for others. I've also stripped the exception for th since generally those shouldn't wrap, but I leave it up to you lot to make that call.

[iruletheworld]

I would like to point out that this solution will disable the click to zoom feature if you are using 'sphinxcontrib.images' for thumbnails.

[rodrigorenie]

@KevinCathcart

def setup(app):
   app.add_javascript("custom.js")
   app.add_stylesheet("custom.css")

Sphinx now returns a warning when using app.add_stylesheet, just use app.add_css_file instead.

[moi90]

Since Sphinx 1.8, the correct way to specify custom css files in conf.py seems to be:

html_css_files = [
  'custom.css'
  'https://example.com/css/custom.css',
  ('print.css', {'media': 'print'})
]