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.
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'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>
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:
±
±
±
I have a specific table to display.
It displays an array of objects.
My object contains:
common data (displayed in black in the table)
'income' specific data (displayed in red in the table)
'depense' specific data (displayed in green in the table)
I did something that looks like what I want but I'm not sure I did it in the clean way.
plunkr
<table border=1>
<thead>
<tr>
<th></th>
<th colspan=5>Depense</th>
<th colspan=5>Income</th>
</tr>
<tr>
<th rowspan=2> id invoice</th>
<th>title1</th>
<th>title2</th>
<th>title3</th>
<th>title4</th>
<th>title5</th>
<th>title6</th>
<th>title7</th>
<th>title8</th>
<th>title9</th>
<th>title10</th>
</tr>
<tr>
<th>depense1</th>
<th>depense2</th>
<th>depense3</th>
<th>depense4</th>
<th>depense5</th>
<th>income1</th>
<th>income2</th>
<th>income3</th>
<th>income4</th>
<th>income5</th>
</tr>
</thead>
<tbody>
<tr >
<td rowspan=2>id invoice : 10</td>
<td>10/02/2015</td>
<td>tartenpion</td>
<td>II</td>
<td>AA</td>
<td>1.25</td>
<td>FRED</td>
<td>fact 12</td>
<td>10</td>
<td>13</td>
<td>xx</td>
</tr>
<tr>
<td>avoir1</td>
<td>avoir2</td>
<td>avoir3</td>
<td>avoir4</td>
<td>avoir5</td>
<td>vente1</td>
<td>vente2</td>
<td>vente3</td>
<td>vente4</td>
<td>vente5</td>
</tr>
</tbody>
</table>
Plus : in order to display each record on two rows I had to add a column called "id invoice", then as I don't want it to be display I added some css to hide it.
I am pretty sure my code is dirty, but I don't know how to do that another way.
If someone can help me on this...
I would like to assert that a table row contains the data that I expect in two different tables.
Using the following HTML as an example:
<table>
<tr>
<th>Table 1</th>
</tr>
<tr>
<td>Row 1 Col 1</td>
<td>Row 1 Col 2</td>
</tr>
</table>
<table>
<tr>
<th>Table 2</th>
</tr>
<tr>
<td>Row 1 Col 1</td>
<td>different data</td>
</tr>
</table>
The following assertion passes:
$this->assertElementPresent('css=table:contains(Table 1)');
However, this one doesn't:
$this->assertElementPresent('css=table:contains(Table 1) tr:contains(Row 1 Col 1)');
And ultimately, I need to be able to test that both columns within the table row contain the data that I expect:
$this->assertElementPresent('css=table:contains(Table 1) tr:contains(Row 1 Col 1):contains(Row 1 Col 2)');
$this->assertElementPresent('css=table:contains(Table 2) tr:contains(Row 1 Col 1):contains(different data)');
What am I doing wrong? How can I achieve this?
Update:
Sounds like the problem is a bug in Selenium when trying to select descendants.
The only way I was able to get this to work was to add an extra identifier on the table so I could tell which one I was working with:
/* HTML */
<table id="table-1">
/* PHP */
$this->assertElementPresent("css=#table-1 tr:contains(Row 1 Col 1):contains(Row 1 Col 2)");
This is probably due to a bug in the CSS selector library used by Selenium. As a workaround you might want to try the following:
css=table:contains(Table 1) > tbody tr:contains(Row 1 Col 1)
Details of the bug can be found here: http://jira.openqa.org/browse/SEL-698