i have table that i convert to pdf with html, but i have a trouble to split content to next page like picture below :
how to split content table of html, to next page inside 1 td long content /td ?
here`s my html sample
<table>
<tr>
<td>
long content, and truncated cause the content was exceed the paper limit
</td>
</tr>
</table>
Related
I have a table that is structured as following:
<table>
<tbody>
<tr>
<td>...
</td>
...
<td>...
</td>
</tr>
</tbody>
</table>
I would like to add a css class to it that makes the td elements break into a new line as soon as the end of the screen is reached. currently a scrollbar is created within the table.
Is there a way to do it without requiring to break out of the tr element?
I create a web page with table rows. It is looking good when i press print button. But sometimes page breaks are cutting page middle of the block. I tried to use tbody as this
<table>
...
<tbody>
<tr><td>sample datea 1</td></tr>
<tr><td>sample datea 2</td></tr>
<tr><td>sample datea 3</td></tr>
</tbody>
<tbody>...</tbody>
...
</table>
When i want to print page it writes as
//first page
sample datea 1
sample datea 2
// second page
sample datea 3
I want to cut after sample datea 3 . I tried to add blokla's div tag CSS as
.blokla{display:block;page-break-inside:avoid; page-break-after:auto}
How can i break page between div tags or another ? My main problem is below.
The CSS you have is valid and works on my end.
However the problem you have is that you are creating two <tbody> tags in a single table. This practice is not "valid" HTML (it is valid). Use only one <tbody> and use this CSS;
tr{page-break-inside:avoid; page-break-after:auto}
Changing the CSS in this way ensures for maximum flexibility in your HTML, presentation for each row will now remain together.
I solved this question with this code
tbody{page-break-inside:avoid; page-break-after:auto; position:relative;
display:block;}
It is working fine.
I have two tables that align horizontally using this syntax:
<table width=100%>
<tr>
<td><table1 code goes here>
</td>
<td><table2 code goes here>
</td>
</tr>
</table>
This is all fine and dandy and they align if the tables have the same number of data rows. But if one has fewer than the other, then they are still aligned in the same positions, but the other table is shrunk, so they look like:
header
data
data
data header
data data
data data
data data
data
data
Is there any way to getthem to align from the top down, as well?
Like
header header
data data
data data
data data
data
data
data
data
data
How can I fix this?
You can use valign = top.
<table width=100%>
<tr>
<td valign="top"><table1 code goes here>
</td>
<td valign="top"><table2 code goes here>
</td>
</tr>
</table>
You need to use display: inline-block; for each table if using CSS
Else you can add <td valign="top"> for both tables in HTML
Adding a <td valign="top"> will solve your problem for sure. This tag vertically aligns the contents from the top making it stick to the top line.
Similarly you can also use some other values for valign as per your needs.
They are:
baseline
middle
bottom
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 am writing a scraper with Nokogiri, and I want to scrape a large HTML file.
Currently, I am scraping a large table; here is a small fragment:
<table id="rptBidTypes__ctl0_dgResults">
<tr>
<td align="left">S24327</td>
<td>
Airfield Lighting
<div>
<div>
<table cellpadding="5px" border="2" cellspacing="1px" width="100%" bgcolor=
"black">
<tr>
<td bgcolor="white">Abstract:<br />
This project is for the purchase and delivery, of various airfield
lighting, for a period of 36 months, with two optional 1 year renewals,
in accordance with the specifications, terms and conditions specified in
the solicitation.</td>
</tr>
</table>
</div>
</div>
</td>
</tr>
</table>
And here is the Ruby code I am using to scrape:
document = doc.search("table#rptBidTypes__ctl0_dgResults tr")
document[1..-1].each do |v|
cells = v.search 'td'
if cells.inner_html.length > 0
data = {
number: cells[0].text,
}
end
ScraperWiki::save_sqlite(['number'], data)
end
Unfortunately this isn't working for me. I only want to extract S24327, but I am getting the content of every table cell. How do I only extract the content of the first td?
Keep in mind that under this table, there are many table rows following the same format.
In CSS, table tr means tr anywhere underneath the table, including nested tables. But table > tr means the tr must be a direct child of the table.
Also, it appears you only want the cell values, so you don't need to iterate. This will give you all such cells (the first in each row):
doc.search("table#rptBidTypes__ctl0_dgResults > tr > td[1]").map(&:text)
The content of the first td would be:
doc.at("table#rptBidTypes__ctl0_dgResults td").text
The problem is that your search is matching two different things: the <tr> tag nested directly within the table with id rptBidTypes__ctl0_dgResults, and the <tr> tag within the table nested inside that parent table. When you loop through document[1..-1] you're actually selecting the second <tr> tag rather than the first one.
To select just the direct child <tr> tag, use:
document = doc.search("table#rptBidTypes__ctl0_dgResults > tr")
Then you can get the text for the <td> tag with:
document.css('td')[0].text #=> "S24327"