I'm trying to render a table like this:
Header1 | Header2 Header3
-------------------------
Text1 | Text2 Text3
Text1 | Text2 Text3
Text1 | Text2 Text3
Text1 | Text2 Text3
-------------------------
Text1 | Text2 Text3
Text1 | Text2 Text3
Text1 | Text2 Text3
Text1 | Text2 Text3
The first four lines (not counting the header) always exist. The last fourth line are optional. If they are not present, the separator line shouldn't be drawn as well.
My first idea was to use this CSS selector:
.mytable tr:nth-child(6) > td {
border-top: 1px solid black;
}
In theory, if the 6th line exists, the selector would select it and draw a line (a border) above it. If it does not exist, there is nothing to select in the first place.
But in reality, the border is drawn even if I use 9 as the value for :nth-child() selector. With the value of 10, the borders ceases being drawn. This is true even if I edit the table to contain only the first six lines (and set :nth-child() to nine).
What is the reason for such strange behavior. Are there any ways to get around it?
Edit:
Including the HTML (Mako) code as requested. It's more complicated, but it can be basically reduced to this:
<table class="mytable">
<tr>
<th>Header1</th>
<th>Header2</th>
<th>Header3</th>
</tr>
<tr>
<th>Text1</th>
<td>Text2</td>
<td>Text3</td>
</tr>
<tr>
<th>Text1</th>
<td>Text2</td>
<td>Text3</td>
</tr>
<tr>
<th>Text1</th>
<td>Text2</td>
<td>Text3</td>
</tr>
<tr>
<th>Text1</th>
<td>Text2</td>
<td>Text3</td>
</tr>
% for index in range(4):
<tr>
<th>Text1</th>
% for text in texts:
<td>${text}</td>
% endfor
</tr>
% endfor
</table>
Related
When creating a table with cell spanning over multiple rows I notice that the contents of the text don't wrap but increase the width of the table to produce horizontal scroll bars.
For example consider the following RST,
+-------+-----------------+
| | |
+-------+-----------------+
| | This text must |
+-------+ wrap over to |
| | the next line |
+-------+-----------------+
when built produces,
As I increase the length of the text, the table grows horizontally. what should I do for it to wrap? For now, I'm forcing it to wrap by manually inserting line breaks with "|" but the produced output looks bad.
There is a table directive with a :widths: attribute.
.. table::
:widths: 20, 80
+-------+-----------------+
| | |
+-------+-----------------+
| | This text must |
+-------+ wrap over to |
| | the next line |
+-------+-----------------+
There might also be a way to control column widths with custom CSS, but I was not able to override the <colgroup> tags in the Sphinx output.
You won't be able to override the colgroup tag in Sphinx. You could try using the rst2html5 package instead, which doesn't generate colgroup. Another option is using CSS to control column widths:
col:nth-child(1) {
width: 200px;
}
col:nth-child(2) {
width: 300px;
}
<table border="1" class="docutils">
<colgroup>
<col width="29%" />
<col width="71%" />
</colgroup>
<tbody valign="top">
<tr><td> </td>
<td> </td>
</tr>
<tr><td> </td>
<td rowspan="2">This text must
wrap over to
the next line</td>
</tr>
<tr><td> </td>
</tr>
</tbody>
</table>
I use a chain of
knitr::knit2html("test.Rmd") # generates test.md & test.html
rmarkdown::render("test.md") # overwrites test.html
to generate an html report.
This chain provides good functionality as my report usually combines pictures, tables & text. If I ran only
knitr::knit2html("test.Rmd")
"test.html" will be generated, but it looks awkward, i.e. pictures not shown correctly.
Normally, this works fine, but this time sample names that are headers of a table contain '+' or '-'.
| | IP_gene8-_1st| IP_gene8+_1st|
|:--------------|-------------:|-------------:|
|IP_gene8-_1st | 1.0000000| 0.4357325|
|IP_gene8+_1st | 0.4357325| 1.0000000|
"test.html" generated by knit2html("test.Rmd") will contain a valid table, but other pictures are not shown correctly.
<table><thead>
<tr>
<th align="left"></th>
<th align="right">IP_Rad18-_1st</th>
<th align="right">IP_Rad18_1st</th>
</tr>
</thead><tbody>
<tr>
<td align="left">IP_Rad18_1st</td>
<td align="right">1.0000000</td>
<td align="right">0.4357325</td>
</tr>
<tr>
<td align="left">IP_Rad18_1st</td>
<td align="right">0.4357325</td>
<td align="right">1.0000000</td>
</tr>
</tbody></table>
Running rmarkdown::render("test.md") produces a "test.html" with a table as text only, but e.g. pictures shown correctly. The crappy table output looks like this:
| | IP_gene8-_1st| IP_gene8+_1st|
|:-------------|-------------:|-------------:|
|IP_Rad18_1st | 1.0000000| 0.4357325|
|IP_Rad18_1st | 0.4357325| 1.0000000|
Usually, '+' and '-' can be protected using '/', but this does not have any effect in the table context.
Is there any way to trick rmarkdown::render() to create a valid html-table?
You can use below unicode entity code for +/- sign in markdown as well as html:
±
±
±
This question already has answers here:
Why doesn't table > tr > td work when using the child selector?
(2 answers)
Closed 8 years ago.
I can't figure out why I can't achieve selecting rows that are direct children of a table (given that other sub-table are included in TD's of main table, I just want direct children rows, not rows of descendant tables).
Here the remaining structure after radical simplification (also see jsfiddle here):
<body>
<table>
<tr>
<td>TR 1 - TD 1 </td>
<td>TR 1 - TD 2 </td>
</tr>
<tr>
<td>TR 2 - TD 1</td>
<td>
<table>
<tr>
<td>Table 2 - A </td>
<td>Table 2 - B </td>
</tr>
<tr>
<td>Table 2 - C</td>
<td>Table 2 - D</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
I'm not able to select rows that are direct children of the main table:
- body>table tr {background-color:lightgray;} logically selects all rows of table and sub-table
- body>table tr tr {color:blue;} logically selects all rows of sub-table only
- but body>table>tr {color:red;} doesn't select anything at all (no red text to be seen)
What am I doing wrong? On the structure? On the selectors?
->jsfiddle
a tbody element may be automatically inserted when it is not in the markup (the side effect is that a table > tr selector could fail), so try to change last rule with body > table > tbody tr.
example: http://jsfiddle.net/wn84hotm/2/
I am trying to put together a table that uses the twitter bootstrap striping but I need it to NOT apply to "nested" rows. By that I mean I have table like this (striped cells marked with S):
------------------------------------------------------------------------
| S | S | S | S | S |
------------------------------------------------------------------------
| | | | | |
| | ------------------------------ |
| | | S | S | |
------------------------------------------------------------------------
| | | | | |
------------------------------------------------------------------------
Because the second row here has cells with rowspan="2", the single row cells get the striping effect. To complicate this, the rows laid out like the 2nd row are conditional so I can't simply apply to striping to every 3rd row. Is there a way to get the striping to account for the rowspan?
Add some empty table rows to avoid odd striping with bootstrap tables.
<table class="table table-striped table-bordered">
<tr>
<th colspan="2" rowspan="3">header 1</th>
<th>header 2</th>
</tr>
<tr>
</tr>
<tr>
<th>sub header 1</th>
</tr>
<tr>
<td>row 1 cell 1</>
<td>row 1 cell 2</>
<td>row 1 cell 3</>
</tr>
<tr>
<td>row 2 cell 1</>
<td>row 2 cell 2</>
<td>row 2 cell 3</>
</tr>
</table>
Without the empty tr line the above would not start row 1 as striped, with the tr line row 1 striped as expected.
My question is pretty basic but cannot find an answer on Google. I do wonder if I missed something about the ice:column component.
I do use code like :
<ice:panelGrid columns="3">
<ice:column style="background-color: yellow;">
<ice:outputText value="..." />
</ice:column>
<ice:column>
// row content
</ice:column>
<ice:column>
// row content
</ice:column>
// other rows
</ice:panelGrid>
It seems that the column component has a style and styleClass attribute, however nothing is ever rendered in the HTML.
How do you apply a style to a perticular cell of a table with IceFaces ?
Thanks in advance for the answer.
Like as standard JSF <h:panelGrid> the <ice:panelGrid> has a columnClasses attribute which allows you to specify a comma-separated list of column classes which are to be applied subsequently on the columns. Also, in standard JSF <h:panelGrid>, the <h:column> is not supported. This is only suppored in <h:dataTable>. Instead, every direct child of <h:panelGrid> is treated as a single column, which can be just <h:outputText> or <h:panelGroup> if you have multiple components which need to go in a single column.
So, this should do:
<ice:panelGrid columns="3" columnClasses="col1,col2,col3">
<ice:panelGroup>row 1 col 1</ice:panelGroup>
<ice:panelGroup>row 1 col 2</ice:panelGroup>
<ice:panelGroup>row 1 col 3</ice:panelGroup>
<ice:panelGroup>row 2 col 1</ice:panelGroup>
<ice:panelGroup>row 2 col 2</ice:panelGroup>
<ice:panelGroup>row 2 col 3</ice:panelGroup>
...
</ice:panelGrid>
which will generate
<table>
<tbody>
<tr>
<td class="col1">row 1 col 1</td>
<td class="col2">row 1 col 2</td>
<td class="col3">row 1 col 3</td>
</tr>
<tr>
<td class="col1">row 2 col 1</td>
<td class="col2">row 2 col 2</td>
<td class="col3">row 2 col 3</td>
</tr>
...
</tbody>
</table>
You can specify the style in the .col1, .col2 and .col3 classes the usual way.
.col1 {
background: yellow;
}