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
Related
I want to create a table inside a RMarkdown document that has a code chunk inside one of the table cells. I can put inline code using the `` symbols inside a table cell, but not an entire, multi-line code chunk.
For example, in-line code works fine to produce a markdown table:
header1 | header2
--------|--------
`code` | text
But what if you want to put a code chunk in the lower-left corner instead of inline code? Say for example you have the following chunk and you want it in one of the table cells:
```{r}
2 + 2
3 + 3
```
I have no idea how to achieve this.
Edit: The html solutions provided by yifan are great! But, what about for pdf outputs? We discussed this in this issue on the rmarkdown github page. Best solution for now seems to be to use grid tables, like this:
+----+-----+
|col1|col2 |
+====+=====+
|``` |foo |
|a | |
|b | |
|``` | |
+----+-----+
This will work for code blocks, but not code chunks, which does not seem feasible without substantial changes to rmarkdown or knitr.
Method 1: Bootstrap table in HTML
<table class='table'>
<tr> <th>column1</th> <th>column2</th> <tr>
<tr>
<td>
```{r}
print("a")
```
</td>
<td>
```{r}
a = runif(10)
print(a)
```
</td>
<tr>
</table>
Method 2: Bootstrap Grids
<div class="container">
<div class="row">
<div class="col-md-6">Column 1</div>
<div class="col-md-6">Column 2</div>
</div>
<div class="row">
<div class="col-md-6">
```{r}
print("a")
```
</div>
<div class="col-md-6">
```{r}
a = runif(10)
print(a)
```
</div>
</div>
</div>
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 put ng-repeat in my table because I'm doing a multiple table here's whats look like,
and I don't know where to put the <br> tag to make them separate every repeat of the table
Here is my view (slim format)
table.md-table ng-repeat="(key, value) in search.leave_applications | groupBy:'employee.name'"
tr.md-table-headers-row
th.md-table-header name
th.md-table-header start
th.md-table-header end
th.md-table-header status
tr.md-table-headers-row
td.md-table-headers-row
| {{key}}
td.md-table-headers-row colspan="3"
tr.md-table-headers-row ng-repeat=" date in value"
td.md-table-headers-row
td.md-table-headers-row
| {{date.starts_on}}
td.md-table-headers-row
| {{date.ends_on}}
td.md-table-headers-row stats
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.