I'm using <cfdocument> to generate a PDF that contains tables. I have all of my style declarations within the <cfdocument> and those styles are being read properly.
My problem is that if I set a background-color for a row, that color overflows onto about half of the right and bottom table borders. Here's an image of what I'm seeing on the PDF document, colors are for visual identification of each border. The PDF prints with the same anomalies.
The table border is 1.5pt red line, which you can see on the left and top just fine, but the right and bottom borders are thinner. The rows numbered 1, 2, and 4 all have a class applied to the <tr> providing a background-color (#fff or #eee). To prove what I thought was happening, I adjusted row 3 so that there is no background-color declared at all. Note that row 3 has the proper width for the right table border. Other testing has shown that the background-color is affecting the bottom table border as well.
Can I do something to the <tr> classes (.even and .odd) to prevent this from happening?
Here's my style declarations:
| <style> | ||
| table.courselist {border: 1.5pt solid #c00;} | ||
| table.courselist th.top {border-right: 1pt solid #00C; border-bottom: 1pt solid #00c; padding: 2px 5px;} | ||
| table.courselist th.topright {border-bottom: 1pt solid #00c; padding: 2px 5px;} | ||
| table.courselist th.main, td.main {border-right: 1pt solid #0C0; padding: 2px 5px;} | ||
| table.courselist th.right, td.right {padding: 2px 5px;} | ||
| .xsmall {font-size: small; color: #000;} | ||
| .even {color: #000; background-color: #eee;} | ||
| .odd {color: #000; background-color: #fff;} | ||
| </style> |
Thanks!