I'm using play framework. I am able to generate the PDF using PDF module. My Problem here is i want to add the table headers in every page. Here is my code
<table width="100%" border="1" id="example" cellspacing="0" cellpadding="0" style="border-collapse: collapse" class="-fs-table-paginate: paginate;">
<thead>
<tr>
<th align="center"><b>Items</b></th>
<th align="center"><b>Quantity</b></th>
<th align="center"><b>Unit Price</b></th>
<th align="center"><b>Amount(Rs).</b></th>
</tr>
</thead>
.....
</table>
I saw here. i added -fs-table-paginate: paginate; in the class attibute. But the table headers are not continued in the next page.
I don't know how to use this. Can you help me Pl.
EDIT: can anyont help me please....
You should add "-fs-table-paginate: paginate;" to the style attribute, not to the class attribute:
<table width="100%" border="1" id="example" cellspacing="0" cellpadding="0" style="border-collapse: collapse; -fs-table-paginate: paginate;">
Related
I'm a starter and I was trying some elements, as practice.
There's sth that i can't figure it out.I also have searched google but no answers found.
I wrote 2 tables, in the first one I used tbody to style the body of the table. But when I load the page, I see the style used in css for the tbody in the first table, has also effected the second table(without tbody tag) completely.Why is this happening?
Here is the code :
<table id="t1">
<caption>UFO Seen by People</caption>
<thead>
<tr>
<th>Name</th>
<th>City Name</th>
<th>Seen</th>
<th>Times seen</th>
</tr>
</thead>
<tbody>
<tr>
<td rowspan="3">Jack</td>
<td>North Russia</td>
<td>2020-06-12</td>
<td>once</td>
</tr>
<tr>
<td>North Korea</td>
<td>2000-06-12</td>
<td>once</td>
</tr>
<tr>
<td>North Pole</td>
<td>1995-06-12</td>
<td>twice</td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="4">Blah Blah Blah</td>
</tr>
</tfoot>
</table>
<table id="t2">
<caption>UFO Seen by People2</caption>
<colgroup>
<col span="2" style="text-align:right; background-color:yellow;">
<col style="background-color:cyan; background-image:url('baelen.jpg');">
</colgroup>
<tr>
<th>Name</th>
<th>City Name</th>
<th>Seen</th>
<th>Times seen</th>
</tr>
<tr>
<td rowspan="3">Dan</td>
<td>North Russia</td>
<td>2020-06-12</td>
<td>once</td>
</tr>
<tr>
<td>North Korea</td>
<td>2000-06-12</td>
<td>once</td>
</tr>
<tr>
<td>North Pole</td>
<td>1995-06-12</td>
<td>twice</td>
</tr>
</table>
And here is the css used :
#t1 { border:2px solid black; border-spacing:10pt; background-color:pink; width:100%;}
#t2 { border:2px solid rgb(20,20,20); border-collapse:collapse; width:100%;}
tbody { background-color:white; text-align:center; vertical-align:middle; font-size:20pt;}
That's really simple, that affect the second table cause you use tbody in css and not #t1 tbody, use correct selector if you want to affect only one element.
In addition I advise you not to use style on HTML and in CSS except in the case of manipulation in JavaScript. This will also allow you to better understand what does what, if you want to give a particular style to elements of your table assign their classes to your CSS.
I use datatable for displaying data and table has 14 columns
but i facing issue in display table header data.It overlapped rather then display in two lines
I create table like this
<table id="tbl" class="table" cellspacing="0" width="100%" style="word-wrap:break-word;
table-layout: fixed;">
<thead>
<tr>
<th>Column Name</th>
</tr>
</thead>
</table>
How can i do it in two lines
<table id="tbl" class="table" cellspacing="0" width="100%" style="word-wrap:break-word;
table-layout: fixed;">
<thead>
<tr>
<th style="word-wrap: break-word;">Column Name</th>
</tr>
</thead>
</table>
overfow:hidden should do the trick ;-)
Even though I set padding to "0" in Mailchimp design areas, my content blocks don't butt up and touch each other, there is a whitespace between the blocks. I dragged over and inserted a code block, but I don't know what to put in it to make these items touch. I added a picture of the code block input area. Can somebody please tell me what code to put in this area? Thanks so much in advance. I removed the > so that it would render on the page. Sorry for being such a newbie with this.
This is in the code box. div class="mcnTextContent" Use your own custom HTML /div
I found this Mailchimp workaround in a Facebook feed:
Use the Code block to build your sections and remove padding and spacing.
Drag a Code block into your layout. Delete the code that is already in there. Copy and paste the code shown below into the block, save and close.
<table style="max-width:100%; min-width:100%;background-color:#FF0000;" class="mcnTextContentContainer" width="100%" cellspacing="0" cellpadding="0" border="0" align="left">
<tbody>
<tr>
<td class="mcnTextContent" style="padding: 10px 18px 9px; line-height: 200%;" valign="top">
<p class="null" style="font-family: helvetica; font-weight:700; font-size: 35px;text-align:center;color:white">September 2018 Newsletter</p>
</td>
</tr>
</tbody>
</table>
Drag another Code block into your layout, below the block you just created. Delete the code that is already in there. Copy and paste the code shown below into the block, save and close.
<table class="mcnTextBlock" style="min-width:100%;" width="100%" cellspacing="0" cellpadding="0" border="0">
<tbody class="mcnTextBlockOuter">
<tr>
<td class="mcnTextBlockInner" style="padding-top:0px;" valign="top">
<!--[if mso]>
<table align="left" border="0" cellspacing="0" cellpadding="0" width="100%" style="width:100%;">
<tr>
<![endif]-->
<!--[if mso]>
<td valign="top" width="600" style="width:600px;">
<![endif]-->
<table style="max-width:100%; min-width:100%; background-color:#c0c0c0" class="mcnTextContentContainer" width="100%" cellspacing="0" cellpadding="0" border="0" align="left">
<tbody><tr>
<td class="mcnTextContent" style="padding-top:0; padding-right:18px; padding-bottom:9px; padding-left:18px;" valign="top">
<h1 style="text-align:center">It's time to design your email.</h1>
<p>Now that you've selected a template, you'll define the layout of your email and give your content a place to live by adding, rearranging, and deleting content blocks.</p>
<p>By using image with caption blocks in multi-column templates, you can create a product grid that works perfectly for e-commerce.</p>
<p>If you need a bit of inspiration, you can <a class="mc-template-link" href="http://inspiration.mailchimp.com">see what other MailChimp users are doing</a>, or <a class="mc-template-link" href="http://mailchimp.com/resources/email-design-guide/">learn about email design</a> and blaze your own trail.</p>
</td>
</tr>
</tbody></table>
<!--[if mso]>
</td>
<![endif]-->
<!--[if mso]>
</tr>
</table>
<![endif]-->
</td>
</tr>
</tbody>
</table>
Original Facebook feed - click on comments to see original feed
It causes width issue for both tables. Refer the code below,
<table id="tblMessages" class="table table-striped table-bordered full-width table-advance table-hover table-condensed fl" style="border-collapse:collapse !important;">
<thead>
<tr>
<th style="cursor:pointer; width:20%">From</th>
<th style="cursor:pointer; width:60%">Subject</th>
<th style="cursor:pointer; width:20%">Date</th>
</tr>
</thead>
<tbody></tbody>
</table>
And here is second table,
<table id="tblToDos" class="table table-striped table-bordered table-advance full_width table-hover table-condensed fl" style="border-collapse:collapse !important">
<thead>
<tr>
<th style="width:5%"></th>
<th style="cursor:pointer; width:20%">From</th>
<th style="cursor:pointer; width:30%">Patient</th>
<th style="cursor:pointer; width:35%">Subject</th>
<th style="cursor:pointer; width:10%">Reminder Date</th>
</tr>
</thead>
Note that I tried with giving width in "Columns" property of Datatables but no luck.
And if I removed second table init then it is working fine.
I got the solution. Though it is not a proper solution but we can solve this matter by redraw the grid using below code.
$('#tblMessages').DataTable().columns.adjust().draw();
Put this line after you are done with initialising second datatable.
Here is my HTML Script:
How to capture the link element in the tenth row?
HTML image
<table id="dataTableParticipantSearchResults" class="display" width="100%" cellspacing="0" cellpadding="0" border="0">
<thead>
<tr align="left">
<th class="ui-state-default" width="20%" style="width: 154px;">
<div class="DataTables_sort_wrapper"></div>
</th>
<th class="ui-state-default" width="20%" style="width: 96px;"></th>
<th class="ui-state-default" width="15%" style="width: 69px;"></th>
<th class="ui-state-default" width="10%" style="width: 44px;"></th>
<th class="ui-state-default" width="20%" style="width: 156px;"></th>
<th class="ui-state-default" width="15%" style="width: 68px;"></th>
</tr>
</thead>
<tbody>
<tr class="odd" align="left">
<td></td>
</tr>
2.How to store that value, so that i can call the same value to access the link element?
You can always find these kinds of hyperlinks by first identifying the root table id- in this case it will be like this:
WebElement table = driver.findelement(by.id("dataTableParticipantSearchResults"));
Now you can use Xpath or Css Selector to select the link
try this:
table.findelement(by.cssSelector("a[href='LINK']")).click();
or try
table.findelement(by.linktext("LINK")).click();
or try
table.findelement(by.xpath(".//*[#id='dataTableParticipantSearchResults']/tbody/tr/td[0]")).click();
let me know if these work....cheers !
U can store the value in a WebElement and call any number of times.
WeElement link = table.findelement(by.xpath(".//*[#id='dataTableParticipantSearchResults']/tbody/tr/td[9]"));
now call it any number of times:
link.click();---------1st time
link.click();--------- 2nd time
and so on.....cheers !