+ Start a Discussion
John NeffJohn Neff 

help with CSS for visualforce?

Hello, 

I am a tinkerer at best, and am working on creating a PDF attachment to an email template... and I know almost nothing about CSS. 

I would like to be able to set a "Table-Fixed" attribute in CSS, but only apply the attribute to certain tables.  Is this possible? 

Also, my CSS is currently "in-line", and I would like to move it to a static resource, what is the proper syntax for adding the table attribut to what is currently there?  
 
<style>
@page{
size: A4 landscape;
}
</style>
Thank you so much in advance, I am so close to crossing this project off my list!
 
Best Answer chosen by John Neff
Himanshu ParasharHimanshu Parashar
John,

This is the way to apply multiple css on an element. compare with your code and understand :)
 
<table style="border-collapse: collapse;table-layout:fixed" width="860" border="1">

 

All Answers

Himanshu ParasharHimanshu Parashar
Hi John,

Please find answers of your question.

1 Table-fixed attribute in css

Css can be applied to any html element in 3 differnet manners

      1. element ID attribute
      2. element class attribute.
      3. inline stylesheet.

     1. id attribute : this method is used when you want to apply specific css to an element. for example if you want to apply color:red to a <h1> tag you will define that color property in css and it will get applied to <h1>  tag
 
<style>
#redcolor
{
color:red;
font-size:30px;
}
</style>

<h1 id="redcolor">Hello world</h1>

   2. element class attribute : this method is used when you want to apply a single css on multiple items in your html. a . is used to define css in following way
 
<style>
.redcolor
{
color:red;
font-size:30px;
}
</style>

<h1 class="redcolor">Hello world</h1>

<div class="redcolor">My Test Css</div>
here you can see that I have defined a single css redcolor but I have used . instead of # while defining the css and it will be applied to both items.

3. inline style : This method is used when you have very minimum css requirement and you don't want to define them in any external stylesheet. 
 
<h1 style="color:black">Hello world</h1>


2. If you understood my first point here is your question's answer. If you want to apply to an specific table you need to define id attribute of that table and you need to define css for that id in following way
 
<style>
#mytable
{
table-layout: fixed;
}
</style>

<table id="redcolor">
   <tr>
        <td>
       </td>
    </tr>
</table>

3. You can define css as extenal stylesheet  by creating a customstyle.css file and upload that in static resource section. name it as style_resources and add following line in your visualforce page.
 
<apex:stylesheet value="{!URLFOR($Resource.style_resources, 'customstyle.css')}"/>



Thanks,
Himanshu

P.S. If this answer helps you to solve your problem please mark it as best answer. It will help other to find best answer.
John NeffJohn Neff
Thank you Himanshu, 

Right now I am doing my styling inline and can't seem to produce my desired result, my tables are syled like this: 
 
<table style="border-collapse: collapse" table-layout="fixed" width="860" border="1">

And each Column is assigned a fixed width: 
<td width="85"

but it is coming out like this: 

User-added image.

I cant understand why I can't get these gridlines to line up!

 
Himanshu ParasharHimanshu Parashar
John,

This is the way to apply multiple css on an element. compare with your code and understand :)
 
<table style="border-collapse: collapse;table-layout:fixed" width="860" border="1">

 
This was selected as the best answer
John NeffJohn Neff
Oh my gosh thank you so much that made the difference!!

Thank you!