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>
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>
I want to achieve the below result without using jquery:
The table for which data should be scrollable for both axis.
The first column (table header) and first row of the table should be a fixed and with auto adjustable width for the column as per the data entered, similar to google spreadsheet
Above image shows what I have tried, the element containing the table has overflow-x: auto for the horizontal scroll and the element has style="display:block;height:400px;overflow-y:auto" for the vertical scroll for fixed table header. Also some elements contain mat-elements
Following is the html code for above image:
<div style="overflow-x:auto">
<table>
<thead>
<tr>
<th>#</th>
<th>Textbox_1</th>
<th>Textbox_1</th>
<th>Multichoice</th>
</tr>
</thead>
<tbody style="display:block;height:400px;overflow-y:auto">
<tr>
<td>1</td>
<td><div>John</div></td>
<td><div>Ron</div></td>
<td><div><mat-select><mat-option>One</mat-option>
<mat-option>Two</mat-option>
</mat-select>
</div>
</td>
</tr>
</tbody>
</table>
</div>
Expected Result:
Any help is greatly appreciated.
I think it is not possible with CSS only. You might need support of JavaScript/JQuery. Check out this light weight plugin. It will help you for sure.
https://github.com/nitsugario/jQuery-Freeze-Table-Column-and-Rows
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;
}
}
For logo and and menu I have table with two rows. And Picture of person. Upper part of the body is on first row and lower part is on second row. First row should have only one td that is logo of the site and in second row i should make multiple td Can someone help me with that task. I should use tables because my client want it.
You can use the colspan attribute on a <td> element to make it fit more than one column, just increase the number to however many columns you want it to fit across
<table>
<tr>
<td colspan="2">Long column</td>
</tr>
<tr>
<td>Small</td>
<td>Column</td>
</tr>
</table>
jou can use collspan (like in cell[2,0]), further info: http://reference.sitepoint.com/html/td/colspan
I have a table which displays the data from a database. The <tr> and <td> are dynamically created using a for loop.
I want the data alone in that table to scroll with the <th> always visible so that user can see the headers while scrolling through the data.
are you using thead? i think this should work
.tbody{overflow:scroll; height:500px}
<thead>
<tr><th>head1</th>....</tr>
</thead>
<tbody>
<!-- create <tr><td>h1r1</td></td> -->
</tbody>