I have two tables that are supposed to be side by side on the same line.
One table ("stableTable") is always on the right side of the viewable area, and the other table ("movingTable") can be modified to have its align be left, center or right.
Here's the HTML Code
<html>
<head>
<!--Test Header-->
<style>
body {display: inline; width: auto;}
table {width: auto;}
table, th, tr, td {border: 1px solid;}
</style>
</head>
<body>
<table class="stableTable" align="right">
<tr>
<td>
WORLD
</td>
</tr>
</table>
<table class="movingTable" align="right">
<tr>
<td>
HELLO
</td>
</tr>
</table>
</body>
</html>
When I put this in an HTML file and open the browser it shows up correctly as seen below (both side by side):
But here's the output when I put this same HTML code in a JEditorPane (one is on top of the other):
I'm stumped on this one as I have tried different things in an HTML file that appears correct when I open it up on a browser, but it doesn't in the Java JEditorPane.
Any thoughts?
EDIT:
After looking online a little, it appears that Java has a poor track record for rendering HTML and CSS correctly. I found an article that mentioned downloading flyingsaucer jar file (I ended up downloading the flying-saucer-core-9.0.4.jar version) and it appears to render the HTML side by side as I wanted.
Now my only task is to get it to work within the existing maven project I'm working in with the actual tables.
I believe the issue here is with the JEditorPane itself and that it (and Java itself) has a poor track record of rendering HTML/CSS.
I have found that using flying saucer 3rd party app is the way to go. I have tested with that and it does render the HTML as I want.
Here's the link to the specific flying saucer version that I used https://mvnrepository.com/artifact/org.xhtmlrenderer/flying-saucer-core/9.0.4
I'm maintaining a Web Application created using GWT, and which historically was developed to work only in Google Chrome.
There are several "reports" that can be extracted from the system. The way this is implemented is as follows: first, the html for the report is created and displayed in a section of the screen (this works correctly). After that, there is a button which allows to print the report. This action generates the html with the information (in a html table) the same way it would to create the on-screen report, and uses it to create a html file that is then sent to print.
This is where the monster shows its face! (tum-dum-dummmm - dramatic music).
Since Google Chrome updated to verssion 59.0.3071.86, when printing, the table/cells lose their borders, and background colors.
I thought maybe it had comething to do with the generated html, but in fact if I force the html upon printing to be
<!DOCTYPE html>
<html>
<head>
<style>table, th, td {border: 1px solid black !important;}</style>
<title>title</title>
</head>
<body>
<h2>Add a border to a table:</h2>
<table>
<tr>
<th>Firstname</th>
<th>Lastname</th>
</tr>
<tr>
<td>Peter</td>
<td>Griffin</td>
</tr>
<tr>
<td>Lois</td>
<td>Griffin</td>
</tr>
</table>
</body>
</html>
the table still does not get printed correctly (and this is seen also in the Chrome's print preview (yes, even with the option to print background images selected)). The same thing happens if I style the table upon the table's tag itself. Something like:
<table style="border: 1px solid black !important;">
I'm out of ideas, so I'm asking if anybody got into a similar issue, or has any idea about what can I try.
Thanks in advance.
And edit to say that this is not the same problem as the one in the "possible duplicates". I had the "background colors" problem in the past, and I've fixed it. In this case (and as the code-snippet shows) it seems some styles are not interpreted, like for instance the table border. And everything was working prior to chrome 59.0.3071.86, so it seems to be a new issue, not a "solved somewhere in a 5 years' span" one.
And yet another edit to explain a little further:
somewhere in my webapp, there's a little button that reads "print report". This generates an html file which is then sent to print.
I replaced the generated html with a rather simplistic one that ilustrates my problem.
So, everytime I press "Print Report", I "force" this to be the generated html:
<!DOCTYPE html>
<html>
<head>
<style>table, th, td {border: 1px solid black !important;} body { -webkit-print-color-adjust: exact; } </style>
<title>title</title>
</head>
<body>
<h2>Add a border to a table:</h2>
<table>
<tr>
<th>Firstname</th>
<th>Lastname</th>
</tr>
<tr>
<td bgcolor="#FF0000">Peter</td>
<td>Griffin</td>
</tr>
<tr>
<td>Lois</td>
<td>Griffin</td>
</tr>
</table>
</body>
</html>
Notice how I use the
body { -webkit-print-color-adjust: exact; }
Also, I tried some variations like styling the table as:
<table style="border: 1px solid black !important;">
Or the body as
<body style="-webkit-print-color-adjust: exact;">
I'll just add an image from an "html testbed" to show how my omnipresent html should display:
However, when the print preview "pops", this is what I get:
So, neither does the backgound color displays (as I believe happens to other SO users, but with their solution not working here) nor the table borders.
Other edit: I tried defining "print-specific css rules", as follows:
<!DOCTYPE html>
<html>
<head>
<style>
#media print {
body { -webkit-print-color-adjust: exact; }
table, th, td {border: 1px solid black !important;}
}
</style>
<title>title</title>
</head>
<body>
<h2>Add a border to a table:</h2>
<table>
<tr>
<th>Firstname</th>
<th>Lastname</th>
</tr>
<tr>
<td bgcolor=\"#FF0000\">Peter</td>
<td>Griffin</td>
</tr>
<tr>
<td>Lois</td>
<td>Griffin</td>
</tr>
</table>
</body>
</html>
but I get the same results as before. Also (and maybe this is relevant... and maybe it isn't) if I define, for instance, a table width, THAT styling is correctly displayed upon printing, whilst the table borders are still hidden/not present/magically removed (chose one).
FINAL EDIT - workaround:
I was not able to solve the problem per se, and I really REALLY do not understand why it happens.
What I was able to do was get a workaround working, and I'm posting it here not as an answer, but still hopping it could help somebody:
The way I did it was: when I pressed the print button, I open a new window having only the html that I want to print (exactly as I want it printed), and using javascript I make it print after the page is loaded.
This way it works, and it prints with the correct formatting.
Some might say it is luck, others "black magic". I say "Done! Next!" (altough I'm not happy with the fact I don't understand the problem in the first place).
Have you tried the style directly inside the table tag?
<table border="1px" bgcolor="green">
<tr>
<td>ANYTHING RANDOM
</td>
</tr>
</table>
D.
<table border="1" >
<tr>
<th>Firstname</th>
<th>Lastname</th>
</tr>
<tr>
<td bgcolor="#FF0000">Peter</td>
<td>Griffin</td>
</tr>
<tr>
<td>Lois</td>
<td>Griffin</td>
</tr>
</table>
<table border="1" >
<tr>
<th>Firstname</th>
<th>Lastname</th>
</tr>
<tr>
<td bgcolor="green">Peter</td>
<td>Griffin</td>
</tr>
<tr>
<td>Lois</td>
<td>Griffin</td>
</tr>
</table>
/* you can add the table border with size 1 or your wish . In HTML table border tag helps to add this feature to the web application.*/
Others experiencing the same issue were able to resolve with "border: thin solid #000;", where the border thickness was expressed as "thin" rather than "1px".
Developing a WebPage with Footer, Header and Left column.
Below is main.jsp code
<table>
<tr valign='top'><td><%#include file='leftside.jsp'%></td>
<td><table>
<tr><td><%#include file='header.jsp'%></td></tr>
<tr><td>Content</td></tr>
<tr><td><%#include file='footer.jsp'%></td></tr>
</table>
</td>
</tr>
</table>
The leftside.jsp code is below
<body bgcolor=blue>
Leftside
</body>
On running main.jsp, I only get the text as Leftside. The background color of blue is not displayed. Am i missing anything? Thanks.
Try to use this:
<body style="background-color:blue;">
Or with adding the apostrophes "blue":
<body bgcolor="blue">
Instead this:
<body bgcolor=blue>
Please use the apostrophes "" and it will work fine
<body bgcolor="blue">
Leftside
</body>
I am Generating and sending Mailer using Servlet by replacing placeholders in Mail Template.Can I Use embedded style in Email for Styling as Below instead of inline styling
I am using a Newsletter email which has three place holder for Header Image, Email Body and Email Footer.Now the problem is since the Header Image is with in a anchor tag I am getting a border around the Image.
Is it Possible to get rid of the border by using embedded css
Is there any alternate solution for this problem since the whole ###HEADER_IMAGE### is replaced by Image tag rather than Just image source.
The HTML code is as below.
<html>
<style>
a img
{
border-style : none;
}
</style>
<table width="590">
<tr>
<td colspan="2">
<a href="#" target="_blank">
###HEADER_IMAGE###
</a>
</td>
</tr>
</table>
<div>
###EMAIL_BODY###
</div>
<div>
###EMAIL_FOOTER###
</div>
</html>
Thanks for Reply
I've just installed grails rendering plugin and would like to use it for generating PDF files. I've created simple template, but it is exported without any css styles. If I simply render template from grails, then page appears with all styles in my web browser.
So, my question is - how to correctly include CSS file during PDF generation process?
My template:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<link rel="stylesheet" href="${resource(dir:'css',file:'main.css')}" />
<link rel="stylesheet" href="${resource(dir:'css',file:'webui.css')}" />
<r:layoutResources/>
<title>Report</title>
</head>
<body>
<div id="content">
<div id="center-container">
<h1><g:message code="default.list.label" args="[entityName]" /></h1>
<table>
<thead>
<tr>
<th class="trip">trip</th>
</tr>
</thead>
<tbody>
<tr class="odd">
<td>
${tip}
</td>
</tr>
</tbody>
</table>
</div>
</div>
</body>
</html>
And I have style .odd in my webui.css, but it is not applied on the row.
Any help would be appreciated.
Edit1: I found out that styles are fetched, if I do it in the following way:
<link rel="stylesheet" href="my_appname${resource(dir:'css',file:'main.css')}" />
But I don't want to hardcode application name (this is also a base context path). Is there a better way to generate proper link to a css file?
It may be late with my answer but I wanted to share my experience here with rendering pdf in grails. I followed the below steps and failed over to the next until I get a pdf:
Used the resource plugin in the template gsp to grab a module where css was bundled.
For example:
Test.gsp
<html>
<head>
<r:require modules="bootstapApp"/>
<r:layoutResources/>
</head>
<body>
....
<r:layoutResources/>
</body>
</html>
The above worked fine but the styles were not used in the pdf after rendering. I had to fall over to step 2.
2.Started using tag as mentioned above in the problem statement.
Result: No change. I wasn't able to get the styles in the pdf.
Failed over to step 3
3.Added the styles inline in the template gsp. And then I was able to apply them to the pdf. Point to note here is that if you follow step 3 and you have css like bootstrap.css then inlining them in the template will be cumbersome. Even if we add them, do not forget to put them inside the media tag. For me the below worked perfectly fine:
<style type="text/css">
#media all {
//CSS styles goes here
}
</style>
Try setting grails.serverURL in Config.groovy to the app url (ex. grails.serverURL=http://localhost:8080/appname). The plugin resolves all relative links via this setting
I shared my answer elsewhere, but I ended up just embedding the external file contents into the gsp for pdf rendering:
https://stackoverflow.com/a/32767378/1599616