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
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 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 am storing old html markup in my database, tracking changes, and then trying to render the diff using Differ and the :html format option.
The following code is successfully generated:
<table>
...
<tr>
<th style="width:60px; text-align:left;">
Owner:
</th>
<del class="differ">
<td>
<span id="someID">Previous Owner Name</span>
</td>
</del>
<ins class="differ">
<td>
<span id="someID">Current Owner Name</span>
</td>
</ins>
</tr>
...
</table>
Notice the <del> and <ins> tagged elements.
If I view the source, it looks fine.
But because apparently this would disrupt the table layout, all browsers seem to move these new elements to before the table. When I inspect the element, I get the following:
<del class="differ"> </del>
<ins class="differ"> </ins>
<table>
...
<tr>
<th style="width:60px; text-align:left;">
Owner:
</th>
<td>
<span id="someID">Previous Owner Name</span>
</td>
<td>
<span id="someID">Current Owner Name</span>
</td>
</tr>
...
</table>
I tried writing a custom Rails view helper to replace each <ins> and <del> with a <span>, but the same thing happens.
Is there a way to style the table using elements like I am trying to do, or am I going to have to walk the dom and apply styles to each appropriate <td> using javascript? I cannot replace the tables in the beginning because I don't control the source.
Thanks to David & Steve for confirming the issue, I was able to resolve this specific case by translating the <ins> and <del> tags into classes, and applying them to each child element using Nokogiri prior to rendering the view.
I created a table_safe helper as follows:
def table_safe(markup)
parsed = Nokogiri.parse(markup)
parsed.css('ins').children().each do |el|
if el['class']
el['class'] = el['class'] << ' ins'
else
el['class'] = 'ins'
end
end
parsed.css('del').children().each do |el|
if el['class']
el['class'] = el['class'] << ' del'
else
el['class'] = 'del'
end
end
parsed.to_s
end
This can obviously be refactored, but it solves the problem. Ideally I could modify the :html formatting option in the Differ gem so that it inserts the tags inside of the first nested element if that element itself has not changed. I'm not sure why this isn't the default functionality, but it is outside the scope of my capabilities.
Why not add a CSS stylesheet to copy the style class differ to all TD elements?
<link rel="stylesheet" type="text/css" href="some.css" />
And then a definition like this in the stylesheet:
td {
padding: 15px;
background-color: gold;
text: black;
font-family: Courier, "Courier New", Tahoma, Arial, "Times New Roman";
border: 1px solid black;
/* Some other properties here...... */
}
And a sample HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Anything</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" type="text/css" href="ja.css" />
</head>
<body bgcolor="white" text="black">
<table>
<tr>
<td>A</td>
<td>B</td>
</tr>
<tr>
<td>C</td>
<td>D</td>
</tr>
</table>
</body>
</html>
Working example:
http://pastehtml.com/view/ckdf6rxo3.html
Maybe this W3Schools link will be useful:
CSS Styling Tables
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)