I use pisa xhtml2pdf to convert an html code to pdf.
I have a problem! pisa did not apply some style to my table such as height and vertical-align
<table style='overflow: hidden;' border='1' cellpadding='0' cellspacing='0'
width="300px">
<tr style="background-color : yellow; height:100px;">
<td style="color: red; height:100px; vertical-align: middle;">
A lot of data
</td></tr></table>
but after converting this html to pdf, height of table tds and vertical-align did not correct!
Please help me.
You need to specify a height (height:100px;) to the table too example for you :
<table style='overflow: hidden; height:100px;' border='1' cellpadding='0' cellspacing='0' width="300px">
<tr style="background-color : yellow;height:100px;">
<td style="color: red; height:100px; vertical-align: middle;">
<!-- A lot of data -->
</td>
</tr>
</table>
I managed to get the height of the cell with this hack:
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tr>
<td width="100%" style="border: 1px solid #000"><!-- content goes here --></td>
<td width="0"><br><br><br><br><br></td><!-- special cell to keep the height of the table -->
</tr>
</table>
The second cell is completely invisible and the code above draws a box of 100% in width and the height is defined by amount of <br>s in the second cell or amount of the text in the first cell (whichever comes longer)
Related
How can we identify a table element which having
xmlns:soap="http://url" in it.
I tried with the below solution but it didnt work :
driver.findElement(By.xpath("//table[namespace-uri()='http://**url**'][#class = 'selected']"));
Here is the HTML code :
<table xmlns:soap="schemas.xml***********a" xmlns:html="www.***********" cellspacing="0" cellpadding="0" style="width: 100%; height: 203px; table-layout: fixed;" objecttype="testenvironment" id="table_TestEnvironments" sort_col="name" sort_order="ascending" height="203px">
I am drawing one table with border=1 but it looks quite prominent as I am enclosing one image inside it so I want to make it thinner for better look and feel.
<table border=1 cellpadding=50 cellspacing=0><tr><td></td></tr></table>
How can I reduce border thickness?
You can style it like this:
td, th {
border: .1px solid black;
}
JSFIDDLE DEMO
This sample code may help you,
CSS+HTML
table{
border:5px solid blue;
}
caption{
color:wheat;
}
th{
border:2px solid yellow;
background-color:grey;
}
td{
border:3px solid red;
background-color:green;
}
<table border=1 cellpadding=50 cellspacing=0>
<caption>TABLE</caption>
<thead>
<tr><th>H1</th><th>H2</th></tr>
</thead>
<tbody>
<tr><td>1</td> <td>1</td></tr>
<tr><td>1</td> <td>1</td></tr>
</tbody>
<tfoot>
<tr><td colspan="2" >FOOTER</td></tr>
</tfoot>
</table>
I am trying to export the data from a field of type Table Grid into a PDF format. While achieving it, I get a below html code of this table grid field exported into the PDF O/P. I am trying to convert this HTML table to XSL-FO and output it as a PDF. I am sorry I complete noob to this approach. How to transform this HTML table to PDF as final O/P.Can anybody share the exact approach of converting this HTML table to XSL-FO table and output it as PDF.
Below is the XSL-FO and Velocity template code to get the HTML reference of the customfield object and then using the $pdfRenderer tool I try to display the table grid value in the PDF export.
<!-- Table Grid Customfield 'customfield_10300' -->
#set ($customfieldId = "customfield_10300")
#set ($customfield = $customFieldManager.getCustomFieldObject($customfieldId))
#set ($moduleDescriptor = $customfield.getCustomFieldType().getDescriptor())
#set ($fieldLayoutItem = ${fieldLayout.getFieldLayoutItem($customfieldId)})
#set ($htmlMarkup = $moduleDescriptor.getViewHtml($customfield, "htmlMarkup", $issue, $fieldLayoutItem))
<fo:table space-before="3mm" border="thin solid #CCCCCC">
<fo:table-body>
<fo:table-row>
<fo:table-cell padding="4px">
<fo:block background-color="#EEEEEE" padding="4px" font-weight="bold" start-indent="4px" end-indent="4px">$i18n.getText($customfield.name):
</fo:block>
</fo:table-cell>
<fo:table-cell padding="4px"> <fo:block>$pdfRenderer.asRendered($issue, $customfieldId, $htmlMarkup) </fo:block>
</fo:table-cell>
</fo:table-row>
</fo:table-body>
However, this $htmlMarkup displays the below complete HTML code for the table grid customfield than the value.
<div id="customfield_10300_grid-container" class="idalkogrid-view" style="overflow-y: visible; overflow-x:visible;" rel="customfield_10300" name="idalko-grid-field">
<table id="customfield_10300_grid"></table>
<div id="customfield_10300_grid_pager"></div>
<div id="customfield_10300_filter"></div>
<table class="grid" border="0" cellspacing="0" cellpadding="0" style="width: 100%;">
<tr bgcolor="#f0f0f0">
<th>Summary</th>
<th>Assignee</th>
<th>Status</th>
<th>Date due</th>
</tr>
<tr bgcolor="#ffffff">
<td style="border: 1px solid #CCCCCC; padding: 2px;"> Table Grid Summary1 </td>
<td style="border: 1px solid #CCCCCC; padding: 2px;"> admin </td>
<td style="border: 1px solid #CCCCCC; padding: 2px;"> Open </td>
<td style="border: 1px solid #CCCCCC; padding: 2px;"> 2014-01-14 </td>
</tr>
</table>
</div>
How to make this $htmlMarkup variable display the table grid with proper values in the PDF
The JIRA add-on called JIRA PDF View Plugin you were asking about, officially supports the Table Grid Editor custom fields since version 3.4.0.
That means it does not require any custom coding, table fields will export to PDF by default.
See the details in the product documentation.
(Disclaimer: this question is related to a commercial product and I'm a developer working on it.)
The table has two rows and one column. Each field has a background image (50px height) and another image for the hover effect, which is the first field 100px and in secound 50px.
My question has to do with this effect. When you hover on the first field to show an image of 100ps, which covers the second field without moving the table?
I tried this but it only expands height of the first field without cover second field.
<html>
<head>
<style>
table {border: none;}
.one:hover {background-image: url('1.jpg'); height: 100px; }
.two:hover { background-image: url('2.jpg');}
</style>
</head>
<body>
<table cellspacing="0" cellpadding="0">
<tr style="background: url(td-one.jpg);" width="200" height="50" >
<td class = "one">Firstname</td>
</tr>
<tr style="background: url(td-two.jpg);" width="200" height="50">
<td class = "two" >Lastname</td>
</tr>
</table>
</body>
</html>
The <td> will never break out of the <tr> structure (row height), so it will never cover the cell below it. You will need to add a <div> inside your cells for each, .one and .two.
Then changing the height of the <div> and playing around with float:left on this <div> might render what you want.
I've spent two weeks to find any solution for this, but can't came across. If you float tables after each, there will be a one pixel gap in Microsoft Outlook 2007/2010, which uses the Microsoft Word 2007 HTML render engine:
I'd thank you any working solution – which is not to put the tables in separated <td>'s.
Here is the HTML code for reproduce it:
<html>
<head>
<title>Outlook 2007/2010 horizontal gap</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<style type="text/css">
table { mso-table-lspace: 0pt; mso-table-rspace: 0pt; }
</style>
</head>
<body bgcolor="#000000">
<table bgcolor="#ffff00" align="left"><tr><td> </td></tr></table>
<table bgcolor="#ffff00" align="left"><tr><td> </td></tr></table>
</body>
</html>
What I've tried so far:
display: inline-table; instead of align="left"
searched for other relevant mso- CSS attributes with no luck
removed whitespaces between <table> elements
border-collapse: collapse and border-spacing: 0
adding border: 1px solid red; will remove gap but increase the width of the tables
other display's, padding and margin
non related or deprecated html attributes (rules, frame, border, etc.) on <td> and/or <table>
Fun factor:
If you put these two tables into a table, the extra gap's width will increase to 2 pixels.
Here is an example of how to float tables. You need a combination of border="1" and mso-table css in there to get rid of the 1px gap. See example:
<table bgcolor="#454545" width="100%" border="0" cellpadding="0" cellspacing="0"><tr><td width="5%"></td><td align="center" width="95%">
<div align="left" style="float: left; padding: 0px; margin:0px;">
<table border="1" bordercolor="#959595" cellpadding="0" cellspacing="0" align="left" style="padding: 0px; margin:0px; mso-table-lspace: -1pt; mso-table-rspace: -1pt; ">
<tr>
<td width="318" bgcolor="959595">table 1
</td>
</tr>
</table>
</div>
<div align="left" style="float: left; padding: 0px; margin:0px;">
<table border="1" bordercolor="#959595" cellpadding="0" cellspacing="0" align="left" style="padding: 0px; margin:0px; mso-table-lspace:-1pt; mso-table-rspace: -1pt; ">
<tr>
<td width="318" bgcolor="959595">table 2
</td>
</tr>
</table>
</div>
</td></tr></table>
Try with table border="0" cellspacing="0" cellpadding="0" on each of the two table's. If i understand your issue correct this should solve it :)
We might be SOL here. I am also working on email formats compatible with Outlook 2007/10. If my readings are correct, Outlook 2007/10/13 do not support border-spacing for tables, which is probably what's giving you that spacing issue.
Refs:
Word 2007 HTML and CSS Rendering Capabilities in Outlook 2007 (Part 1 of 2)
Guide to CSS support in email | Campaign Monitor