David Brierton
David Brierton

Reputation: 7397

CFdocument losing CSS for border-bottom

When using CFdocument to create a pdf in CF10 I lose a lot of css. Is there any documentation anywhere that shows what css is allowed to be used for CFdocument or is it just keep trying and its hit or miss. Right now I am just trying to add a border-bottom style and it will not show whether its inline or a cascading style sheet.

Does anyone know where I can find what CSS can be used for CFdocument to help me make this border-bottom appear and other CSS that is not showing.

<cfdocument format="pdf" scale="75" backgroundvisible="yes" overwrite="no" fontembed="yes">
<tr style="border-bottom: solid 1px coral;"> 

Upvotes: 1

Views: 969

Answers (4)

mas
mas

Reputation: 11

hope my solution can give some ideas
 <cfdocument format="pdf" margintop="0.1" marginbottom="0.1"> 
<html>
<head>
    <style>
  
table,  td {  
  border: 1px solid thin black;
  border-right:none;
  border-top: none;
  text-align: left;
  border-spacing: 0px;
  padding:0px;
  font:smaller;
 
}

table {
  border-collapse: collapse;
  
  widtd: 100%;
}

td {
border: 0px;
 border-top: 1px solid thin black;
 border-right: 1px solid thin black;
border-spacing:0px;
 padding:5px;
 border-spacing: 0px;
 font:xx-small;
}
    </style>
</head>
<body>
<table cellspacing="0">
      <tr>
        <td>Firstname</td>
        <td>Lastname</td>
        <td>Savings</td>
  </tr>
  <tr>
    <td>Peter</td>
    <td>Griffin</td>
    <td>$100</td>
  </tr>
  <tr>
    <td>Lois</td>
    <td>Griffin</td>
    <td>$150</td>
  </tr>
  <tr>
    <td>Joe</td>
    <td>Swanson</td>
    <td>$300</td>
  </tr>
  <tr>
    <td>Cleveland</td>
    <td>Brown</td>
    <td>$250</td>
  </tr>
</table>
<br/>
<table cellspacing="0">
  <tr>
    <td>Firstname</td>
    <td>Lastname</td>
    <td>Savings</td>
  </tr>
  <tr>
    <td>Peter</td>
    <td>Griffin</td>
    <td>$100</td>
  </tr>
  <tr>
    <td>Lois</td>
    <td>amat</td>
    <td>$150</td>
  </tr>
  <tr>
    <td>Joe</td>
    <td>Swanson</td>
    <td>$300</td>
  </tr>
  <tr>
    <td>Cleveland</td>
    <td>alim</td>
    <td>$250</td>
  </tr>
</table>
<br/>
<table cellspacing="0">
  <tr>
    <td>Firstname</td>
    <td>Lastname</td>
    <td>Savings</td>
  </tr>
  <tr>
    <td>Peter</td>
    <td>hidayah</td>
    <td>$100</td>
  </tr>
  <tr>
    <td>Lois</td>
    <td>hanifah</td>
    <td>$150</td>
  </tr>
  <tr>
    <td>Joe</td>
    <td>siti</td>
    <td>$300</td>
  </tr>
  <tr>
    <td>manjung</td>
    <td>Brown</td>
    <td>$250</td>
  </tr>
</table>
</body>
</html></cfdocument>

Upvotes: 1

bernster
bernster

Reputation: 61

I resolved this issue by using a class on the tr like so.

tr.border_bottom td {
  border-bottom:1pt solid black;
}

Upvotes: 1

Saravana Kumar
Saravana Kumar

Reputation: 3396

You Can Use CSS inside cfdocument like below :

<cfheader name="Content-Disposition" value="inline; filename=Example.pdf">
<cfcontent type="application/pdf">
<cfdocument format="pdf" orientation="landscape">
<style>
    tr {padding-top: 5px}
    td {font-size: 8px; padding-top: 2px}
</style>
<table>
    <tr>
        <td>
            Example
        </td>
    </tr>
</table>

Upvotes: 1

Miguel-F
Miguel-F

Reputation: 13548

It's right there with the documentation under Supported CSS Styles - cfdocument I don't think the supported tags has changed since ColdFusion 9.

Supported CSS styles

The cfdocument tag supports the following CSS styles:

background

background-attachment

background-color

background-image

background-position

background-repeat

border

border-bottom

border-bottom-color

border-bottom-style (solid border only)

border-bottom-width

border-color

border-left

border-left-color

border-left-style (solid border only)

border-left-width

border-right

border-right-color

border-right-style (solid border only)

border-right-width

border-spacing

border-style (solid border only)

border-top

border-top-color

border-top-style (solid border only)

border-top-width

border-width

bottom

clear

clip

color

content (strings, counters only)

counter-increment

counter-reset

cursor

display

float

font

font-family

font-size

font-style

font-weight

height

left

letter-spacing

line-height

list-style-type

margin

margin-bottom

margin-left

margin-right

margin-top

outline

outline-color

outline-style (solid, dotted, dashed only)

outline-width

padding

padding-bottom

padding-left

padding-right

padding-top

page-break-after

page-break-before

page-break-inside

position

right

text-align (left, right, and center)

text-decoration

text-indent

top

unicode-bidi

vertical-align

visibility

white space (normal, nowrap only)

width

z-index

Upvotes: 2

Related Questions