using cfdocument to generate PDF

Report · Oct 20, 2010

Hi all,

The actual table is a lot larger than the mock-up one that I am going to show you but this mock-up one does explain the problem. Please go to http://www.monteandjanicechan.com/test_table.cfm

The thickness of the grid lines in the table are coming up the way I want in the HTML version. You can do a View Source to see the actual HTML stuff that gets generated. Now, I put these HTMl codes within the cfdocument tag with format="pdf"; please go to http://www.monteandjanicechan.com/test_table_pdf.cfm. You will see the inconsistent thickness of the grid line for sneezing and for flu. To further illustrate my point, I removed the background colors and generate a PDF; please go to http://www.monteandjanicechan.com/test_table_pdf_nocolor.cfm. The thickness of the grid lines is back to normal.

This leads me to believe that the background color of one cell somehow goes over to the cell right next to it and cover up the border. Here are the strange things:

1) This is ONLY happening in rowspan and ONLY happening from the second row on to the rest of the rowspan. For example, first Sneezing is okay but the border of the second sneezing is not correct; the first Flu is okay but the borders of the second and the third Flu are not correct.

2) The background color does NOT cover the border of its own cell at all; it only cover the border of the cell right next to it.

My question is, how can I fix this issue?

Any suggestions and pointers are greatly appreciated.

Report · Oct 23, 2010

Two things:
1) Whether or not this is a bug. The cfdocument style implementation seems to differ from the browser's. It seems that, in cfdocument, the style of an element overrides that of the element preceding it. For example, the style of the row

<tr>
<td class="b">Joe Schmo</td>
<td class="c" style="background-color:#99FF99">Sneezing</td>
</tr>

overrrides the style of the row

<tr>
    <td class="b">John Doe</td>
    <td class="c" style="background-color:#99FF99">Sneezing</td>
    <td class="d_style" rowspan="2" style="background-color:#99FF99">Nose Spray</td>
</tr>

Therefore, as there is no d_style in the Joe Schmo row, this row overrides the d_style inherited from the rowspan. This might or might not be a bug. However, it should make you wonder whether or not you've over-designed.

2) Your styling is inefficient. For example, the following style settings draw 2 borders at the same place

.c_first {border-right:1px solid black;}
.d_first {border-left:1px solid black;}

<td class="c_first" style="background-color:#ffff99">Cough</td>
<td class="d_first" style="background-color:#ffff99">Vitamins</td>

If your intention is to emphasize a border, then it is easy to improve your styling. One way to do so is to remove the border-right setting of the first TD, and double the border-left of the next TD. Alternatively, you may double the border-right setting of the first TD, and remove the border-left of the next TD.

Also, it is best-practice to transfer all the CSS to the style sheet, so that your table contains no CSS code.

The following HTML is based on what I've just said:

<html>
<head>
    <title>Test Table</title>
    <style type="text/css">
    .a_style
        {border-left: 1px solid black;
        border-bottom: 1px solid black;
        border-top: 1px solid black;
        border-right: 1px solid black;
        }
    .a2_style
        {border-left: 1px solid black;
        border-bottom: 1px solid black;
        border-top: 1px solid black;
        border-right: 2px solid black;
        }
    .a3_style
        {
        /* border-left: 2px solid black;*/
        border-bottom: 1px solid black;
        border-top: 1px solid black;
        border-right: 1px solid black;
        }
    .b_first
        {border-right: 1px solid black;
        border-bottom: 1px solid black;
        border-left: 1px solid black;
        border-top: 1px solid black;}
    .b_last
        {border-right: 1px solid black;
        border-bottom: 1px solid black;
        border-left: 1px solid black;}
    .b
        {border-right: 1px solid black;
         border-bottom: 1px solid black;
         border-left: 1px solid black;}
    .c1
        {
        border-right: 2px solid black;
        border-bottom: 1px solid black;
        background-color: 99FF99;}
    .c2
        {border-right: 2px solid black;
        border-bottom: 1px solid black;
        background-color: cccccc;}
    .c_first
        {
        border-right: 2px solid black;*/
        border-bottom: 1px solid black;
        border-top: 1px solid black;
        background-color: ffff99;}
    .c_last
        {border-right: 1px solid black;
        border-bottom: 1px solid black;
        background-color: cccccc;}
    .d_style
        {
        /* border-left: 1px solid black;
        border-right: 1px solid black;
        border-bottom: 1px solid black;
        background-color: 99FF99;
        }

    .d_first
        {
        border-right: 1px solid black;
        border-bottom: 1px solid black;
        /* border-left: 2px solid black;*/
        background-color: ffff99;}
    .d_last
        {
        border-right: 2px solid black;
        border-bottom: 1px solid black;
        /* border-left: 1px solid black;*/
        background-color: cccccc;}

    </style>
</head>
<body>
<table border="0" cellspacing="0" cellpadding="5">
<tr>

    <td class="a_style">Name</td>
    <td class="a2_style">Problem</td>
    <td class="a3_style">Treatment</td>
</tr>
<tr>
    <td class="b_first">Jane Doe</td>
    <td class="c_first">Cough</td>

    <td class="d_first">Vitamins</td>
</tr>
<tr>
    <td class="b">John Doe</td>
    <td class="c1">Sneezing</td>
    <td class="d_style" rowspan="2">Nose Spray</td>
</tr>

<tr>
    <td class="b">Joe Schmo</td>
    <td class="c1">Sneezing</td>
</tr>
<tr>
    <td class="b">Joe Six Pack</td>
    <td class="c2" >Flu</td>

    <td class="d_last" rowspan="3">Flu Shot</td>
</tr>
<tr>
    <td class="b">Joe The Plumber</td>
    <td class="c2">Flu</td>
</tr>
<tr>
    <td class="b_last">Joe Doe</td>
    <td class="c2">Flu</td>
</tr>
</table>
</body>
</html>

Report · Oct 25, 2010

BKBK,

Thank you very much for your response.

After posting up my question, I did go with doubling the border on the right and took the left border out. With this code change though, as explained by your point 1, some of the horizontal grids do not appear to be connected to the vertical grids. But this is not too obvious.

The report was designed to work with another PDF generation engine (because there was no cfdocument tag at the time when this report was first created). Apparently, that PDF engine would ignore certain styles if we were to use the styling method that you provided in your post. That explains the inefficient way of styling. After all, "If it ain't broke, don't fix it."

Report · Oct 25, 2010

"If it ain't broke, don't fix it."

OK