I have over 40+ rows of html table that span across 2-3 pages. I have only two small columns in the table so I thought of fully occupying the space in the page by merging two page's table data in one page to save paper when printing. Let's say, if the 24th row is last row in first page, I want the 25th row to appear in the second page column (not table column) of the same page as depicted in the screenshot.
I used Yii2 framework's Gridview to render the data. The generated html is as below.
<div id="w0" class="grid-view"><div class="summary">Total <b>50</b> items.</div>
<table class="table table-striped table-bordered"><thead>
<tr><th>Appt.#</th><th>Patient Name</th><th>User Phone No</th></tr>
</thead>
<tbody>
<tr data-key="93"><td>1</td><td></td><td>abc</td></tr>
<tr data-key="94"><td>2</td><td></td><td>xyz</td></tr>
.
.
.
</tbody></table>
</div>
You could try rendering the container using columns, but support is pretty flaky.
#media print
{
#w0
{
-webkit-column-count: 3;
-webkit-column-gap: 20px;
}
}
Related
I'm currently using openhtmltopdf to convert an html to pdf. The html has a table1(no header) with 3 rows, then some text and then table2(with a header) which can have many rows. Assuming table2 is getting paginated across multiple pages, the pdf should look like this -
table1(on every page having atleast 1 row from table2)
some text(only on the page having 1st row of table 2)
table2 paginating with header repeating on every page
For repeating the header of table2 on all the pages, I am using -fs-table-paginate:paginate which works. But how do I repeat table 1 and the text as per the requirement? Really appreciate the help in advance.
You can either put the table 1 in the header of the page (it will appear on every page, not only on page containing table 2).
An other option is to include table 1 in the thead of table 2, with some CSS to make it appear as a separate table.
For example:
<head>
<style>
td{border:1px solid red}
#table1, #table1 td{border: 0}
table{-fs-table-paginate:paginate;border-collapse: collapse}
</style>
</head>
<body>
<table id="table2">
<thead>
<!-- Table 1 -->
<tr>
<td id="table1">
<table>
<tr><td>Table1</td></tr>
<tr><td>Value</td></tr>
</table>
</td>
</tr>
<!-- Header of table 2 -->
<tr><td>Col name</td></tr>
</thead>
<tbody>
(...)
</tbody>
</table>
</body>
Currently I have a dynamic table that is printed on multiple pages, and have a repeated header using Flying Saucer pagination.
The problem I am facing is if the table is too low at the bottom of the page, it just prints the table header and does not have any rows under it.
I am wondering how I can hide the header if there are no rows on the same page. The entire page is dynamic, so I cannot hardcode the table to go to the next page as I do not know how low the table will be.
table {
width: 100%;
-fs-table-paginate: paginate;
border-spacing: 0;
}
<!-- lots of dynamic data, spans across multiple pages -->
<table>
<thead>
<th>
myheader
</th>
</thead>
<tbody>
<tr>
<td>
~lots of data, rows epeated multiple times dynamically
</td>
</tr>
</tbody>
</table>
Somehow I can't figure out the following: Alternate table row color using CSS?
If I use the code suggested in the aforementioned topic the even cells get colored (the first, third and fifth. There is a total of 5 cells in a row). It doesn't matter if I use 'even' or 'odd'.
td:nth-child(odd)
{
background: #f5f6fa;
}
If use the following code, all the rows get colored.:
tr:nth-child(odd)
{
background: #f5f6fa;
}
#svdh You've got tags outside of your body and html tags also which in a normal web page wouldn't be rendered. The problem with your HTML is you're setting up loads of tables instead of one with multiple rows. It should be like this.
<table>
<tr>
<td>One</td>
<td>One.</td>
</tr>
<tr>
<td>Two</td>
<td>Two.</td>
</tr>
<tr>
<td>Three</td>
<td>Three.</td>
</tr>
</table>
Fiddle here..
https://jsfiddle.net/fo7Ldfqs/
UPDATED:
If you've got multiple tables and you're trying to color every other one then just use:
table:nth-child(odd){background:#ff0000;}
Fiddle here.. https://jsfiddle.net/4641ph6u/
I am stuck working on this project that has to be produced as HTML tables.
The page has an outer table with 2 rows: a header/branding cell and then a cell that holds a second table.
This table is dynamically generated by an app and might have any number of rows and columns. The app determines the number of rows and columns requested and spits out the html accordingly.
Every created cell holds another table as a "widget" with the title row and a content row, as shown below. The content row holds an SVG chart.
<table class="widget">
<tbody>
<tr id="trtitlewidget22">
<td id="titlewidget22" class="widget-header"><h3>Enquiries</h3></td>
</tr>
<tr>
<td class="widget-content" id="widget22">
[this would be a js svg chart]
</td>
</tr>
</tbody>
</table>
Here is a fiddle of the whole layout minus the charts (i used filler text). Here's a screen cap:
What I need to do is have the "widget table" always fill its enclosing table cell, as the page is resized and the table flexes. I have tried height 100% to no avail.
I couldn't figure a css-only solution. I would go for a javascript approach. Here's how you can do it easily with JQuery. If you want it vanilla, is possible either:
var fitHeight = function() {
$("table.widget").each(function() {
$(this).removeAttr("style");
});
//It has to be separate from the remove loop, so the height will be re-applied.
$("table.widget").each(function() {
$(this).height($(this).parent().height());
});
}
$(window).resize(fitHeight);
$(document).ready(fitHeight);
http://jsfiddle.net/5LeK6/5/
I'm working on my first ASP.NET MVC 3 app and I've got a page that utilizes a table to display two columns of input elements. It looks something like this:
<table>
<tr>
<th> Description </th>
<th> List </th>
</tr>
<tr>
<td> #Html.TextAreaFor(model => model.Description, new { #class = "vert-stretch-edit" })
</td>
<td rowspan="9"> #Html.EditorFor(model => model.Ingredients) </td>
</tr>
<tr>
<th> Name</th>
</tr>
<tr>
<td> #Html.EditorFor(model => model.Name) </td>
</tr>
</table>
There are more rows than I'm showing here but the idea here is that the Ingredients span 9 rows in the second column and the first column has a bunch of rows made up of headers and entry elements.
This works well enough except that I cannot make the TextAreaFor element take up the entire height of the <td> that contains it. The table stretches out the rows a bit due to the number of items displayed in the Ingredients list, which isn't ideal but isn't horrible in my mind either.
I've tried to set the vert-stretch-edit like so:
.vert-stretch-edit
{
width: 100%;
height: 100%;
}
but that doesn't solve anything vertically for me. I've also tried this:
.vert-stretch-edit
{
width: 100%;
height: 200px;
}
but that's less that ideal as I don't really know that 200px is the correct height, particularly since the list of Ingredients is somewhat variable in length. This all feels quite awkward and wrong. Ultimately what I want to accomplish is have a two-column display where my Ingredients list of checkboxes is as long as it needs to be and my data entry elements take up whatever height they need with the balance of the space taken up by the ice cream's description TextAreaFor element. I kind of like the <table> idea because it lays things out (generally) in a nice way. I find myself struggling with <div>s to make them mimic tables so I avoid them for this type of layout. I suspect this may just be my limited experience using <div>s in this manner. How would you improve this? I'm certainly open to using <div>s instead of <table> if that's the only way to accomplish this, though I get frustrated trying to make them do what I want.
I've landed upon using the autoresize.jquery.js jQuery plugin which works quite well for my needs. you can get it here (See below)
Essentially, you reference the TextArea that you which to apply autoResize to by doing this:
$(myselector).autoResize();
So, for example I could have a TextArea in my view like so:
#Html.TextAreaFor(model => model.Notes, new { #id='mynotes' })
and then do this:
<script javascript>
$(document).ready(function() {
$('#mynotes').autoResize();
});
and the TextArea will auto-expand as the user types. I haven't exhaustively tested this out but it seems to fit the bill for my pages.
Apparently the link to the plug-in by James Padolsey is now dead.
You may want to try this plug-in as an alternative. It is evidently based on the original.