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>
Related
I want to set fixed width to column and if table data is large then that column should be a scroll-able and if screen resolutions get changed then table also get scroll-able.
Example :
Name Surname Salary
sam jdfgdhfgdfgudfgiuudifghdfgjjdfhgjkhdfghkjdhfgjkhdfkjgkjdfhgk 5555
In above example Surname is large then table and column is not get responsive.
How to set fixed length for column with scroll-able property?
Table and column also be responsive to get executable in other screen resolutions.
Wrap the content of the <tbody> in a scrollable <div> :
html:
...
<tbody>
<tr>
<td>
<div class="scroll-table">
<table>
<tr>
<td>Sam</td>
</tr>
<tr>
<td>jdfgdhfgdfgudfgiuudifghdfgjjdfhgjkhdfghkjdhfgjkhdfkjgkjdfhgk </td>
</tr>
<tr>
<td>5555</td>
</tr>
...
css
.scroll-table{
overflow:scroll;
}
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 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.
I am working on a quick and dirty application which involves several single-column tables displayed horizontally within an outer table.
|-------------------------------------------|
| outer table |
|-------------------------------------------|
| --------- --------- --------- |
| | table 1| |table 2| |table 3| |
| --------- --------- --------- |
| | row 1 | | row 1 | | row 1 | |
| --------- --------- --------- |
| ... |
| --------- --------- --------- |
| | row n | | row n | | row n | |
| --------- --------- --------- |
| |
|-------------------------------------------|
--------- ---------
|SHOW #2| |SHOW #3|
--------- ---------
I realize this could be done using css without tables, but I am not adept enough and this doesn't need to be elegant. At the start, only the first table is displayed. Clicking buttons toggles the display from "none" to "inline" (I also tried "block") of #2 and #3. In this example, I set the style of #2 in a DIV around the table and in #3 within a TD around the table. Both methods work in Firefox 22.0 but not in Chrome 27.0 or Safari 5.0 (all on Mac). Is there any solution using tables? Or, if you'd like to design the style sheet, that works too :-)
<html>
<body>
<table id = "main" border=0 cellspacing=20>
<tr>
<td>
<table id = "tbl1" border=0>
<tr><td> table #1, row #1 </td></tr>
<tr><td> table #1, row #2 </td></tr>
</table>
</td>
<td>
<!-- Hide the table with a hidden DIV -->
<div id = "tbl2" style="display:none">
<table border=0>
<tr><td> table #2, row #1 </td></tr>
<tr><td> table #2, row #2 </td></tr>
</table>
</div>
</td>
<!-- Hide the table with a hidden TD -->
<td id = "tbl3" style="display:none">
<table border=0>
<tr><td> table #3, row #1 </td></tr>
<tr><td> table #3, row #2 </td></tr>
</table>
</td>
</tr>
</table>
<br>
<input type=button value ='show table #2' onclick='document.getElementById("tbl2").style="display:inline"'>
<input type=button value ='show table #3' onclick='document.getElementById("tbl3").style="display:inline"'>
<br>
<br>
<input type=button value ='hide table #2' onclick='document.getElementById("tbl2").style="display:none"'>
<input type=button value ='hide table #3' onclick='document.getElementById("tbl3").style="display:none"'>
</body>
</html>
Here's a a working example. While making it, I didn't know you did not want to use jQuery, but I strongly recommend you to change your mind, since all you have to do is adding this to your html, preferably just before the closing </body> tag:
<script src="http://code.jquery.com/jquery-1.7.2.min.js">
$(document).ready(function () {
$('input').on("click", function () {
var inputValue = $(this).val();
var index = inputValue.indexOf("#")
var divId = "#tbl" + inputValue.substr(index+1);
$(divId).toggle();
});
});
</script>
I also changed the html a bit: I'm using 1 input per table: "show or hide" in 1 button.
But you can ofcourse use 2 buttons for it: just change the jQuery and call hide() or show() accordingly. If you really don't wanna use jQuery, you could convert my example to pure JavaScript, but it seems like that's gonna take a bit more coding for you :)
You can use TABS here and still have your table-Element.
Try this: http://jqueryui.com/tabs/
It should help you with your problem