Text is overlapping in Table - wkhtmltopdf

I can see question asked regarding text overlapping for tables (Not header), but none of the result is helping me. please advice.
I have a table with n number of rows (it is a looping with pebble). some time not every, normal text in the table is overlapping to the 1st and 2nd line in the next page, if the table continues to the next page
{% for Item in toArray(x.xx.xxx).yy %}
<tr>
<td valign="top" align="left" style="font-size: 8px;">
{{ Item.ItemQuantity }}
</td>
<td valign="top" align="left" style="font-size: 8px;">
{{ Item.ItemDescription }}
</td>
<td valign="top" align="right" style="font-size: 8px;">
{{ Item.ListItemPrice }}
</td>
<td valign="top" align="right" style="font-size: 8px;">
{{ Item.LineNet }}
</td>
</tr>
{% endfor %}
Any solution?

Related

Problem with rowspan and page break in DomPDF (nesting loop)

Problem with rowspan and page break in DomPDF (nesting loop), this is my code
How to make nesting array with rowspan for column number and good page break?
I can't seem to find anything in the documentation
//Problem with rowspan and page break in DomPDF (nesting array), this is my code
How to make nesting array with rowspan for column number and good page break?
I can't seem to find anything in the documentation
Problem with rowspan and page break in DomPDF (nesting array), this is my code
How to make nesting array with rowspan for column number and good page break?
I can't seem to find anything in the documentation//
<table class="table" style="table-layout: fixed; width: 100%;" >
<tbody>
<tr>
<td class="text-center" style="width:5%;">
<h6>III.</h6>
</td>
<td colspan="2">
<h6>INFORMASI TENTANG KUALIFIKASI DAN HASIL YANG DICAPAI</h6>
<h6 class="font-italic font-weight-bold">INFORMATION OF QUALIFICATION AND LEARNING OUTCOME
</h6>
</td>
</tr>
<tr>
<td class="text-center" rowspan="10">
<p>3.1</p>
</td>
<td colspan="2">
<p class=" font-weight-bold">Capaian Pembelajaran</p>
<p class="font-italic font-weight-bold">Learning Outcomes</p>
</td>
</tr>
<tr>
<td class="text-center" style="width:50%;">
<p class=" font-weight-bold">Bahasa Indonesia</p>
</td>
<td class="text-center" style="width:50%;">
<p class="font-weight-bold">Bahasa Inggris</p>
</td>
</tr>
#foreach($kcs as $kc)
<tr>
<td class="text-center" style="width:50%;">
<p class=" font-weight-bold">{{$kc->kategori_id}}</p>
</td>
<td class="text-center" style="width:50%;">
<p class="font-weight-bold font-italic">{{$kc->kategori_en}}</p>
</td>
</tr>
#foreach($cps as $cp)
#if($cp->id_ps==$data->id_ps && $kc->id==$cp->id_kategori)
<tr>
<td class="text-center" style="width:50%;">
{!! $cp->cpl_id!!}
</td>
<td class="text-center font-italic" style="width:50%;">
{!! $cp->cpl_en!!}
</td>
</tr>
#endif
#endforeach
#endforeach
</tbody>
</table>

How do you create an increment of 1 in the Label Blade Template?

From the template of the blade a tag td foreach the I want to increase by one. How can I do that?
#foreach($winners as $winner)
<tr>
<td scope="row">
<span class="badge">1</span>
</td>
<td style="width:300px">
{{ $winner->name }}
</td>
<td></td>
<td style="width:50px">
{{ $winner->point }}
</td>
</tr>
#endforeach
Laravel's #foreach automatically has a variable called $loop
https://laravel.com/docs/5.8/blade#the-loop-variable
You can simply do:
<td scope="row"><span class="badge">{{ $loop->iteration }}</span></td>
Use php tags, apologies for formatting written on mobile
#php $i = 0; #endphp
#foreach($winners as $winner)
<tr>
<td scope="row">
<span class="badge">{{ $i }} </span>
</td>
<td style="width:300px">
{{ $winner->name }}
</td>
<td></td>
<td style="width:50px">
{{ $winner->point }}
</td>
</tr>
#php $i ++; #endphp
#endforeach
try this:
#php
$i=1;
#endphp
#foreach($winners as $winner)
<tr>
<td scope="row">
<span class="badge">{{ $i++ }}</span>
</td>
<td style="width:300px">
{{ $winner->name }}
</td>
<td></td>
<td style="width:50px">
{{ $winner->point }}
</td>
</tr>
#endforeach

Laravel+vuejs, how to loop inside table td tag?

Below shows my data. I am trying to loop Item inside table <td> tag so that it forms two items in one column.
user
>"name":"Bob"
>"id":1
>"Item":
>"name":"Desk"
>"name":"Chair"
Code
<table class="table table-hover">
<tbody>
<tr>
<th>Name</th>
<th>Items</th>
</tr>
<tr v-for="use in user.data" :key="use.id">
<td>{{ use.name }}</td>
<td v-for="a in use.item">
{{ a.name }},
</td>
</tr>
</tbody>
</table>
But when I do the codes above, it produce another column just like below picture. How do I put the Desk and Chair sits together in one column?
Hi just use a span tag in side td here is my solution, p or div tag are block tags, if you are using bootstrap 4 just set class to span inline-block or inline
<table class="table table-hover">
<tbody>
<tr>
<th>Name</th>
<th>Items</th>
</tr>
<tr v-for="use in user.data" :key="use.id">
<td>{{ use.name }}</td>
<td>
<span v-for="a in use.item"> {{ a.name }}, </span>
</td>
</tr>
</tbody>
</table>
v-for crates another elemenrs for you in each iteration. Use join function to display together
<tr v-for="use in user.data" :key="use.id">
<td>{{ use.name }}</td>
<td>
{{ use.item.join(", ") }},
</td>
</tr>
Output would be Desk, Chair
We can do this with using lodash
`
<tr v-for="use in user.data" :key="use.id">
<td>{{ use.name }}</td>
<td>
{{ _.map(use.item, 'name').join(", ") }}
</td>
</tr>
`

XPATH (Scrapy): select text between 2 certain keywords

I'm trying to extract text between 2 keywords 商品詳細 and 支払詳細 in this HTML
<TR>
<TD BGCOLOR=#336600><BR></TD>
<TD COLSPAN=3 BGCOLOR=#FFFFCC><FONT COLOR=#336600 SIZE=4><B> 商品詳細 </B></FONT></TD>
</TR>
<TR>
<TD COLSPAN=4 HEIGHT=10>
<LI STYLE=><SPAN STYLE=>鍵付きで盗難を防止できます。</SPAN>
<LI STYLE=><SPAN STYLE=>商品サイズ:約28*36*12cm</SPAN>
<LI STYLE=><SPAN STYLE=>素材:鉄製</SPAN>
<LI STYLE=><SPAN STYLE=>※柄は、ランダムにて発送なります</SPAN>
<LI STYLE=><SPAN STYLE=></SPAN>
<LI STYLE=>
<SPAN STYLE=></SPAN>
</TD>
</TR>
<TR>
<TD><BR></TD>
<TD COLSPAN=2 ALIGN=left><BR></TD>
<TD><BR></TD>
</TR>
<TR>
<TD COLSPAN=4 HEIGHT=25><BR></TD>
</TR>
<TR>
<TD BGCOLOR=#336600><BR></TD>
<TD COLSPAN=3 BGCOLOR=#FFFFCC>
<FONT COLOR=#336600 SIZE=4><B> 支払詳細 </B></FONT>
</TD>
</TR>
I tried the solutions in these 2 links but they didn't work for me
Scrapy xpath between 2 keywords
Xpath text extraction between 2 keywords
This is the result I have when run in scrapy shell:
In [21]: response.xpath("//text()[preceding-sibling::*[text()='商品詳細'] and following-sibling::*[text()='支払詳細']]").extract()
Out[21]: []
With xpath you can navigate the document in any direction,so in this case you want to find a key node that you know some info about and navigate to related nodes.
//td[contains(.//text(),'商品詳')] # find td that contains some text
/../following-sibling::tr//li/span/text()" # find text in it's father's sibling
I've tried this in a shell:
>[1]: sel.xpath("//td[contains(.//text(),'商品詳')]/../following-sibling::tr//li/span/text()").ex
tract()
<[1]: ['鍵付きで盗難を防止できます。', '商品サイズ:約28*36*12cm', '素材:鉄製', '※柄は、ランダムにて発送なります']

Parsing a table on a webpage without id's or classes - using Nokogiri or xpath

I wish to parse through a epinions.com page to gather some statistics about a few companies. Epinions have almost no id's or classes, so it's quite difficult to parse the site.
I need to loop through all <tr bgcolor="white"> objects. I have put in 2 samples of this.
From the sample 1, I need to extract:
The alt on this line:
<img src="http://img.epinions.com/images/epi_images/ratings/checks_sm_5.0.gif" alt="Store Rating: 5.0" width="79" height="13" border="0">
The href this line:
CHUMBO ROCKS!
The author at this line:
<span class="rgr">by whitey436, Jan 18, 2006
Here is sample 1:
<tr bgcolor="white">
<td style="padding:10px 5px" align="right" valign="top" height="100%">
<table cellspacing="4" cellpadding="0" border="0" width=100% height="100%">
<tr valign="top">
<td class="rkr" nowrap>Overall Rating:</td>
<td width=80>
<img src="http://img.epinions.com/images/epi_images/ratings/checks_sm_5.0.gif" alt="Store Rating: 5.0" width="79" height="13" border="0">
</td>
</tr>
<span class="rgr">
<tr>
<td class="rgr" nowrap>Ease of Ordering:</td>
<td>
<img src="http://img.epinions.com/images/epi_images/e3/quant_5.gif" width=80 height=11>
</td>
</tr>
<tr>
<td class="rgr" nowrap>Customer Service:</td>
<td>
<img src="http://img.epinions.com/images/epi_images/e3/quant_5.gif" width=80 height=11>
</td>
</tr>
<tr>
<td class="rgr" nowrap>Selection:</td>
<td>
<img src="http://img.epinions.com/images/epi_images/e3/quant_5.gif" width=80 height=11>
</td>
</tr>
<tr>
<td class="rgr" nowrap>On-Time Delivery:</td>
<td>
<img src="http://img.epinions.com/images/epi_images/e3/quant_5.gif" width=80 height=11>
</td>
</tr>
</span>
<tr valign="bottom" height="100%">
<td class="rkb" colspan="2">
<div align="center"> </div>
<div align="center"> </div>
</td>
</tr>
</table>
</td>
<td style="padding:10px;" colspan=2 width="100%" align="left" valign="top">
<h2 style="font-family:arial,helvetica,sans-serif; font-size:87%; color:#000000; font-weight:bold; margin-bottom:0px;">
CHUMBO ROCKS!
</h2>
<span style="line-height:110%">
<span class="rgr">by whitey436, Jan 18, 2006
Rated a <span style="color:#000;">Very Helpful Review</span> by the Epinions community</span>
</span>
<span class="rkr">
<div style="padding:5px 0px"> Its just this simple, I tried buying this receiver from another online supplier who had the lowest price only to find they didnt have any of these units and they wanted to sell me extra warranty then tried to sell a different model in stock from Yamaha ...</div>
<b>
Read the full review
</b>
</span>
</td>
</tr>
From the sample 2, I need to extract:
The alt on this line:
<img src="http://img.epinions.com/images/epi_images/ratings/checks_sm_5.0.gif" alt="Store Rating: 5.0" width="79" height="13" border="0">
The href on this line:
Read more
The author at this line:
<span class="rgr">by whitey436, Jan 18, 2006
Rated a <span style="color:#000;">Very Helpful Review</span> by the Epinions community</span>
Here is sample 2:
<tr bgcolor="white">
<td style="padding:10px 5px" align="right" valign="top">
<table cellspacing="4" cellpadding="0" border="0" width=100%>
<tr>
<td class="rkr" nowrap>Overall Rating:</td>
<td width=80>
<img src="http://img.epinions.com/images/epi_images/ratings/checks_sm_5.0.gif" alt="Store Rating: 5.0" width="79" height="13" border="0">
</td>
</tr>
<tr>
<td class='rgr' > </td>
<td>
<img src='http://img.epinions.com/images/epi_images/spacer.gif' width=80 height=11>
</td>
</tr>
</table>
</td>
<td style="padding:10px;" colspan=2 width="100%" align="left" valign="top">
<span class="rgr">Mar 27, 2006 <br>(Not Yet Rated)</span><br>
<span class="rkr"> Very helpful in giving me the information I needed to make a purchase.<br><b>
Read more
</b></span>
</td>
</tr>
Here is some Nokogiri code to print out the information you want using XPath:
xml.xpath("//tr[#bgcolor='white']").each do |el|
# Get the "Overall rating" tr block from the first td and get (first) img alt
puts el.at_xpath("td[1]//tr[td/text()='Overall Rating:']//img/#alt")
# Get the first link from the second td that contains "content" and get href
puts el.at_xpath("td[2]//a[contains(#href, '/content')][1]/#href")
# Get the (first) link that has an itemprop author value and get the href
puts el.at_xpath("td[2]//a[#itemprop='author']/#href")
end
use Nokogiri will be ok.
to get alt, get back all the image tags and keep the img tag with the specified src
imgs = doc.css('img[src="http://img.epinions.com/images/epi_images/ratings/checks_sm_5.0.gif"]')
to get back the href
links = doc.css('a[href*="/content"]')
to get back the author
links = doc.css('a[href*="/user"]')

Resources