Re: framed wide tables

162 views
Skip to first unread message

Axial

unread,
Nov 5, 2012, 9:05:25 PM11/5/12
to sphinx...@googlegroups.com
Here is a recipe you can try :
  • Use the .. class:: directive just prior to your table (here I'll call it 'scrollwide' - you can use any name you like as long as it conforms to CSS/Sphinx rules):
.. class:: scrollwide
================== =================================================================
col 1              col 2
================== =================================================================
entry 1            vvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvery long entry 2
entry 3            vvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvery long entry 4
entry 5            vvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvery long entry 6
================== =================================================================
  • Add an additional stylesheet to your conf.py (here 'scrollwide.css'):
def setup(app):
    app.add_stylesheet('scrollwide.css')
  • Create the according CSS file in your _static directory with the following content:
table.scrollwide {
    display: block;
    width: 400px;
    background-color: #E0;
    overflow: auto;
}
table.scrollwide td {
    white-space: nowrap;
}

You should get a result similar to this:

See also

One thing which might trip you up is that the class directive might be overwritten by domain extensions.
Use .. rst-class:: instead (see http://sphinx-doc.org/rest.html#id3)

Check your HTML source after the Sphinx build. It should contain the additional CSS class. My example looks like this:

<table border="1" class="scrollwide docutils">
<colgroup>
<col width="22%" />
<col width="78%" />
</colgroup>
<thead valign="bottom">
<tr class="row-odd"><th class="head">col 1</th>
<th class="head">col 2</th>
</tr>
</thead>
<tbody valign="top">
<tr class="row-even"><td>entry 1</td>
<td>vvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvery long entry 2</td>
</tr>
<tr class="row-odd"><td>entry 3</td>
<td>vvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvery long entry 4</td>
</tr>
<tr class="row-even"><td>entry 5</td>
<td>vvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvery long entry 6</td>
</tr>
</tbody>
</table>

Now you should be able to style your table any way you want. I hope this helps.


On Wednesday, 31 October 2012 05:05:11 UTC+13, Davide Cittaro wrote:
Hi all, I'm pretty new to Sphinx, it looks great for my documentation purposes :-)
I'm trying to insert a wide table, meaning that it exceeds the screen width and, most important, it is written over the sidebar. I wonder if it is possible to put a table in a frame just like code-blocks are (indeed code blocks are rendered in a scrollable frame).
Thanks

d

Davide Cittaro

unread,
Nov 6, 2012, 2:31:38 AM11/6/12
to sphinx...@googlegroups.com
Using rst-class worked! Thanks!!

d
On Nov 6, 2012, at 3:05 AM, Axial <holger...@gmail.com> wrote:

> Here is a recipe you can try :
> • Use the .. class:: directive just prior to your table (here I'll call it 'scrollwide' - you can use any name you like as long as it conforms to CSS/Sphinx rules):
> .. class:: scrollwide
> ================== =================================================================
> col 1 col 2
> ================== =================================================================
> entry 1 vvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvery long entry 2
> entry 3 vvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvery long entry 4
> entry 5 vvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvery long entry 6
> ================== =================================================================
> • Add an additional stylesheet to your conf.py (here 'scrollwide.css'):
> def setup(app):
> app.add_stylesheet('scrollwide.css')
> • Create the according CSS file in your _static directory with the following content:
> table.scrollwide {
> display: block;
> width: 400px;
> background-color: #E0;
> overflow: auto;
> }
> table.scrollwide td {
> white-space: nowrap;
> }
>
> You should get a result similar to this:
>
>
> --
> You received this message because you are subscribed to the Google Groups "sphinx-users" group.
> To post to this group, send email to sphinx...@googlegroups.com.
> To unsubscribe from this group, send email to sphinx-users...@googlegroups.com.
> Visit this group at http://groups.google.com/group/sphinx-users?hl=en.
>
>

---
Davide Cittaro
daweo...@gmail.com
http://sites.google.com/site/davidecittaro/

Monami Bhattacharya

unread,
Apr 24, 2015, 4:29:34 AM4/24/15
to sphinx...@googlegroups.com
This was very useful, thanks!
Reply all
Reply to author
Forward
0 new messages