2

I have created a grid table with directives:

..table:: *Table 1: Power Connector* 
  :align: center

This is the result:

enter image description here

The big question is how to move the caption Table 1: Power Connector BELOW the table, is there some trick? I am sure there is, just please don't dig deep into the source code of Sphinx, gimme some simple role or something (CSS or something) that can do it, ideally, a built-in role like :align:

For a popular documentation software, Sphinx really lacks a lot of advanced explanations. I barely found the :align: directive before hitting a bunch of hacks on the python source of Sphinx itself. Come on, is Sphinx just an excuse to learn python?

mzjn
  • 48,958
  • 13
  • 128
  • 248
Dare The Darkness
  • 103
  • 1
  • 8

1 Answers1

4

The table directive is defined by docutils, so even if you need to check source code, you should go to docutils, not sphinx.

A snippet like

.. table:: *Table 1: Power Connector*
   :align: left

   +-----+-----+-----+
   | t   | x   | y   |
   +=====+=====+=====+
   |     |     |     |
   +-----+-----+-----+
   |     |     |     |
   +-----+-----+-----+

is transformed to HTML 5,

<table class="docutils align-left" id="id1">
<caption><span class="caption-text"><em>Table 1: Power Connector</em></span><a class="headerlink" href="#id1" title="Permalink to this table">¶</a></caption>
<colgroup>
<col style="width: 33%" />
<col style="width: 33%" />
<col style="width: 33%" />
</colgroup>
<thead>
<tr class="row-odd"><th class="head"><p>t</p></th>
<th class="head"><p>x</p></th>
<th class="head"><p>y</p></th>
</tr>
</thead>
<tbody>
<tr class="row-even"><td></td>
<td></td>
<td></td>
</tr>
<tr class="row-odd"><td></td>
<td></td>
<td></td>
</tr>
</tbody>
</table>

Thus, the caption is displayed at top due to HTML 5 default style.

To override that, you need to add a CSS file and use caption-side to move it to the bottom,

.docutils caption {
  caption-side: bottom;
}

If you wonder how to use your custom CSS file, you can read the reference.

Reference

Lex Li
  • 60,503
  • 9
  • 116
  • 147
  • You are a real-life-saver. Thanks a million. I was looking for an answer, but I couldn't find it anywhere, at least not as straightforward as this. I am not so versed in CSS, so I needed someone to hack it for me, although I knew the answer might be hidden there :) – Dare The Darkness Nov 06 '21 at 12:32