Applying CSS classes to table rows with Sphinx and reStructuredText











up vote
2
down vote

favorite
1












We have a website that is generated using Sphinx and reStructuredText. Albeit not ideal (I have inherited this code), it's something that so far has worked and serves the purpose. We're trying to extend it slightly and one request was to highlight better certain rows in a table based on a condition (just a bit of context).



What we noticed is that if the element that needs the style applied is the first one in the for-loop, the style gets instead applied to the parent (<tbody>) element.



This is the relevant piece of code that does not seem to be working as intended:



{% for codelist_item in codelist_json.data %}
{% if codelist_item.status == 'withdrawn' %}
.. rst-class:: withdrawn
* - {{codelist_item.code + " (withdrawn)"}}
{% else %}
* - {{codelist_item.code}}
{% endif %}
- {{codelist_item.name}}
...
{% endfor %}


NB: indentation is correct (as in it matches what's in our rst file)



Non working example: http://reference.iatistandard.org/202/codelists/BudgetIdentifierVocabulary/



whose HTML is:



<tbody class="withdrawn" valign="top">
<tr class="row-even">
<td>1 (withdrawn)</td>
<td>IATI</td>
<td>The budget identifier reported uses IATI budget identifier categories</td>
</tr>


Working example: http://reference.iatistandard.org/202/codelists/Currency/



<tr class="withdrawn row-even">
<td>BYR (withdrawn)</td>
<td>Belarussian Ruble</td>
<td>Withdrawn from ISO Currency codelist. Use code BYN.</td>
</tr>


While exploring the Sphinx docs, I stumbled across this bit that might be (or at least sounds) relevant



http://docutils.sourceforge.net/docs/ref/rst/directives.html#id12



This allows the "classification" of individual list items (except the first, as a preceding class directive applies to the list as a whole)



That seems to fit our problem, although like I said I'm not entirely sure it does relate to it.



So far, we tried checking {% forloop.first %}, moving the rst-class:: around, but nothing seems to work.
Any advice?










share|improve this question




















  • 1




    I would use pure CSS and the nth-child of the table row as the selector. Sometimes the programming solution is too complicated.
    – Steve Piercy
    Nov 9 at 0:08










  • The problem is that it have to result in something like (pseudocode-ish) if the table itself has the style applied, it means its first row (nth-child) needs to be styled which is as weak as it gets
    – Samuele Mattiuzzo
    Nov 9 at 9:25















up vote
2
down vote

favorite
1












We have a website that is generated using Sphinx and reStructuredText. Albeit not ideal (I have inherited this code), it's something that so far has worked and serves the purpose. We're trying to extend it slightly and one request was to highlight better certain rows in a table based on a condition (just a bit of context).



What we noticed is that if the element that needs the style applied is the first one in the for-loop, the style gets instead applied to the parent (<tbody>) element.



This is the relevant piece of code that does not seem to be working as intended:



{% for codelist_item in codelist_json.data %}
{% if codelist_item.status == 'withdrawn' %}
.. rst-class:: withdrawn
* - {{codelist_item.code + " (withdrawn)"}}
{% else %}
* - {{codelist_item.code}}
{% endif %}
- {{codelist_item.name}}
...
{% endfor %}


NB: indentation is correct (as in it matches what's in our rst file)



Non working example: http://reference.iatistandard.org/202/codelists/BudgetIdentifierVocabulary/



whose HTML is:



<tbody class="withdrawn" valign="top">
<tr class="row-even">
<td>1 (withdrawn)</td>
<td>IATI</td>
<td>The budget identifier reported uses IATI budget identifier categories</td>
</tr>


Working example: http://reference.iatistandard.org/202/codelists/Currency/



<tr class="withdrawn row-even">
<td>BYR (withdrawn)</td>
<td>Belarussian Ruble</td>
<td>Withdrawn from ISO Currency codelist. Use code BYN.</td>
</tr>


While exploring the Sphinx docs, I stumbled across this bit that might be (or at least sounds) relevant



http://docutils.sourceforge.net/docs/ref/rst/directives.html#id12



This allows the "classification" of individual list items (except the first, as a preceding class directive applies to the list as a whole)



That seems to fit our problem, although like I said I'm not entirely sure it does relate to it.



So far, we tried checking {% forloop.first %}, moving the rst-class:: around, but nothing seems to work.
Any advice?










share|improve this question




















  • 1




    I would use pure CSS and the nth-child of the table row as the selector. Sometimes the programming solution is too complicated.
    – Steve Piercy
    Nov 9 at 0:08










  • The problem is that it have to result in something like (pseudocode-ish) if the table itself has the style applied, it means its first row (nth-child) needs to be styled which is as weak as it gets
    – Samuele Mattiuzzo
    Nov 9 at 9:25













up vote
2
down vote

favorite
1









up vote
2
down vote

favorite
1






1





We have a website that is generated using Sphinx and reStructuredText. Albeit not ideal (I have inherited this code), it's something that so far has worked and serves the purpose. We're trying to extend it slightly and one request was to highlight better certain rows in a table based on a condition (just a bit of context).



What we noticed is that if the element that needs the style applied is the first one in the for-loop, the style gets instead applied to the parent (<tbody>) element.



This is the relevant piece of code that does not seem to be working as intended:



{% for codelist_item in codelist_json.data %}
{% if codelist_item.status == 'withdrawn' %}
.. rst-class:: withdrawn
* - {{codelist_item.code + " (withdrawn)"}}
{% else %}
* - {{codelist_item.code}}
{% endif %}
- {{codelist_item.name}}
...
{% endfor %}


NB: indentation is correct (as in it matches what's in our rst file)



Non working example: http://reference.iatistandard.org/202/codelists/BudgetIdentifierVocabulary/



whose HTML is:



<tbody class="withdrawn" valign="top">
<tr class="row-even">
<td>1 (withdrawn)</td>
<td>IATI</td>
<td>The budget identifier reported uses IATI budget identifier categories</td>
</tr>


Working example: http://reference.iatistandard.org/202/codelists/Currency/



<tr class="withdrawn row-even">
<td>BYR (withdrawn)</td>
<td>Belarussian Ruble</td>
<td>Withdrawn from ISO Currency codelist. Use code BYN.</td>
</tr>


While exploring the Sphinx docs, I stumbled across this bit that might be (or at least sounds) relevant



http://docutils.sourceforge.net/docs/ref/rst/directives.html#id12



This allows the "classification" of individual list items (except the first, as a preceding class directive applies to the list as a whole)



That seems to fit our problem, although like I said I'm not entirely sure it does relate to it.



So far, we tried checking {% forloop.first %}, moving the rst-class:: around, but nothing seems to work.
Any advice?










share|improve this question















We have a website that is generated using Sphinx and reStructuredText. Albeit not ideal (I have inherited this code), it's something that so far has worked and serves the purpose. We're trying to extend it slightly and one request was to highlight better certain rows in a table based on a condition (just a bit of context).



What we noticed is that if the element that needs the style applied is the first one in the for-loop, the style gets instead applied to the parent (<tbody>) element.



This is the relevant piece of code that does not seem to be working as intended:



{% for codelist_item in codelist_json.data %}
{% if codelist_item.status == 'withdrawn' %}
.. rst-class:: withdrawn
* - {{codelist_item.code + " (withdrawn)"}}
{% else %}
* - {{codelist_item.code}}
{% endif %}
- {{codelist_item.name}}
...
{% endfor %}


NB: indentation is correct (as in it matches what's in our rst file)



Non working example: http://reference.iatistandard.org/202/codelists/BudgetIdentifierVocabulary/



whose HTML is:



<tbody class="withdrawn" valign="top">
<tr class="row-even">
<td>1 (withdrawn)</td>
<td>IATI</td>
<td>The budget identifier reported uses IATI budget identifier categories</td>
</tr>


Working example: http://reference.iatistandard.org/202/codelists/Currency/



<tr class="withdrawn row-even">
<td>BYR (withdrawn)</td>
<td>Belarussian Ruble</td>
<td>Withdrawn from ISO Currency codelist. Use code BYN.</td>
</tr>


While exploring the Sphinx docs, I stumbled across this bit that might be (or at least sounds) relevant



http://docutils.sourceforge.net/docs/ref/rst/directives.html#id12



This allows the "classification" of individual list items (except the first, as a preceding class directive applies to the list as a whole)



That seems to fit our problem, although like I said I'm not entirely sure it does relate to it.



So far, we tried checking {% forloop.first %}, moving the rst-class:: around, but nothing seems to work.
Any advice?







python css python-sphinx restructuredtext






share|improve this question















share|improve this question













share|improve this question




share|improve this question








edited Nov 8 at 16:02









mzjn

30.9k565150




30.9k565150










asked Nov 7 at 19:07









Samuele Mattiuzzo

7,29332957




7,29332957








  • 1




    I would use pure CSS and the nth-child of the table row as the selector. Sometimes the programming solution is too complicated.
    – Steve Piercy
    Nov 9 at 0:08










  • The problem is that it have to result in something like (pseudocode-ish) if the table itself has the style applied, it means its first row (nth-child) needs to be styled which is as weak as it gets
    – Samuele Mattiuzzo
    Nov 9 at 9:25














  • 1




    I would use pure CSS and the nth-child of the table row as the selector. Sometimes the programming solution is too complicated.
    – Steve Piercy
    Nov 9 at 0:08










  • The problem is that it have to result in something like (pseudocode-ish) if the table itself has the style applied, it means its first row (nth-child) needs to be styled which is as weak as it gets
    – Samuele Mattiuzzo
    Nov 9 at 9:25








1




1




I would use pure CSS and the nth-child of the table row as the selector. Sometimes the programming solution is too complicated.
– Steve Piercy
Nov 9 at 0:08




I would use pure CSS and the nth-child of the table row as the selector. Sometimes the programming solution is too complicated.
– Steve Piercy
Nov 9 at 0:08












The problem is that it have to result in something like (pseudocode-ish) if the table itself has the style applied, it means its first row (nth-child) needs to be styled which is as weak as it gets
– Samuele Mattiuzzo
Nov 9 at 9:25




The problem is that it have to result in something like (pseudocode-ish) if the table itself has the style applied, it means its first row (nth-child) needs to be styled which is as weak as it gets
– Samuele Mattiuzzo
Nov 9 at 9:25

















active

oldest

votes











Your Answer






StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");

StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);

StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});

function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});


}
});














 

draft saved


draft discarded


















StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53196175%2fapplying-css-classes-to-table-rows-with-sphinx-and-restructuredtext%23new-answer', 'question_page');
}
);

Post as a guest















Required, but never shown






























active

oldest

votes













active

oldest

votes









active

oldest

votes






active

oldest

votes
















 

draft saved


draft discarded



















































 


draft saved


draft discarded














StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53196175%2fapplying-css-classes-to-table-rows-with-sphinx-and-restructuredtext%23new-answer', 'question_page');
}
);

Post as a guest















Required, but never shown





















































Required, but never shown














Required, but never shown












Required, but never shown







Required, but never shown

































Required, but never shown














Required, but never shown












Required, but never shown







Required, but never shown







這個網誌中的熱門文章

Tangent Lines Diagram Along Smooth Curve

Yusuf al-Mu'taman ibn Hud

Zucchini