I have a table structure in HTML where I have to use rowspan and RTL(Right To Left) direction for Arabic characters. But while converting this HTML to PDF, rowspan is not working as expected. Assuming this is a bug in ColdFusion where an HTML with rowsapn and RTL direction is not working correctly.
Note that this is working fine for LTR (Left To Right) direction (ex: English Characters). But I need to use RTL direction since Arabic characters need to be displayed in PDF.
Any idea why this is not working?
Sample Code :
<cfdocument format="PDF" filename="C:\test.pdf" overwrite="true">
<!DOCTYPE html>
<html>
<head>
<style>
table, th, td {
border: 1px solid black;
}
table#mainTable {direction:rtl;}
</style>
</head>
<body>
<cfoutput>
<table id="mainTable">
<tr>
<td>Tariff</td>
<td>Description</td>
<td>Quantity</td>
<td>Unit Price</td>
<td>Amount</td>
</tr>
<tr>
<td rowspan="7" >Customer Level Charges</td>
<td>9999123456</td>
<td>18.16</td>
<td>6</td>
<td>108.96</td>
</tr>
<tr>
<td>9999123456</td>
<td>18.16</td>
<td>6</td>
<td>108.96</td>
</tr>
<tr>
<td>9999123456</td>
<td>18.16</td>
<td>6</td>
<td>108.96</td>
</tr>
<tr>
<td>Adjustments</td>
<td colspan="4">-20</td>
</tr>
<tr>
<td>This Month Amount</td>
<td colspan="4">1091.92</td>
</tr>
<tr>
<td>Last Month outstanding Amount</td>
<td colspan="4">0</td>
</tr>
<tr>
<td>Total</td>
<td colspan="4">1146.51</td>
</tr>
</table>
</cfoutput>
</body>
</html>
</cfdocument>
Expected Result
It should work as how it is working in Browser, screen shot attached.
Related
Consider the following table in html:
<table style="border-collapse:collapse">
<tr>
<td style="height:25px"></td>
<td style="width:150px;border:1px solid #aaa;"></td>
<td rowspan="4" style="width:10px;"></td>
<td style="width:150px;border:1px solid #aaa;"></td>
</tr>
<tr>
<td style="height:25px"></td>
<td></td>
<td></td>
</tr>
<tr>
<td style="height:25px"></td>
<td></td>
<td></td>
</tr>
</table>
This table renders just fine on every desktop web browser I've tried, but on the mobile web browsers I've tried (iOS: Safari and Chrome), the middle column extends the left and right borders to the bottom. It looks like this:
Is there any way to get around this without, ideally without changing border-collapse or the middle column's rowspan?
The minimal code is given below. Note that -
I need 1px border(I think that means need border-collapse).
Also transition and background-color change cannot be compromised.
CSS only solution.
Am doing wrong or would you have a fix/alternate, or its a bug. Please help me out. Thank you.
<!DOCTYPE html>
<html><head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
#wrap-div{display:flex;}
#com_table{width:800px; border-collapse:collapse; border-spacing:0px; margin:50px auto;text-align:center}
th, td{border:1px solid #3AC;}
#com_table > tbody > tr:hover{color:#fff; background-color:#aaa; transition:all .25s linear;}
</style>
</head>
<body>
<div id="wrap-div">
<table id="com_table">
<thead>
<tr>
<th>Order Date</th>
<th>Status</th>
<th>Total Amt</th>
</tr>
</thead>
<tbody>
<tr>
<td>24/05/2021</td>
<td>NEW</td>
<td>900.00</td>
</tr>
<tr>
<td>24/05/2021</td>
<td>CONFIRMED</td>
<td>900.00</td>
</tr>
<tr>
<td>28/05/2021</td>
<td>CONFIRMED</td>
<td>850.00</td>
</tr>
<tr>
<td>28/05/2021</td>
<td>CONFIRMED</td>
<td>1845.00</td>
</tr>
<tr>
<td>15/05/2021</td>
<td>SETTLED</td>
<td>4221.00</td>
</tr>
<tr>
<td>17/05/2021</td>
<td>SETTLED</td>
<td>1549.00</td>
</tr>
<tr>
<td>17/05/2021</td>
<td>SETTLED</td>
<td>250.00</td>
</tr>
<tr>
<td>18/05/2021</td>
<td>SETTLED</td>
<td>1249.00</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
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.
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
I want to put a string on HTML content.I have the next code
<table>
<tr>
<td>hi</td>
</tr>
<tr class="pem">
<td>hello</td>
</tr>
<td>1</td>
<td>2</td>
</tr>
<tr>
<td>hi</td>
</tr>
<tr class="pem">
<td>hello</td>
</tr>
<td>1</td>
<td>2</td>
</tr>
</table>
So if you see, I need to put 2 "tr" to close it.
I think i need to make a for like this:
for each node as htmlNode in doc.DocumentNode.SelectNodes("//tr[contains(#class,'pem')]")
//And here i want to make a appendchild to put only the "tr" to open it
node.appendChild("<tr>")
But it doesn't work because I need to make an HTML node or htmlElement
You need to use CDATA tags in order to insert html elements in xml.
An example would be:
<xml>
<title>Your HTML title</title>
<htmlData><![CDATA[<html>
<head>
<script/>
</head>
<body>
Your HTML's body
</body>
</html>
]]>
</htmlData>
</xml>