| tr = table row | For coloring a whole row. |
| | | th = table header | For coloring one cell of the table header. |
| | | td = table detail | For coloring one cell of the table body. |
| Repeat in all | and the corresponding | of a column | | For coloring a column of your table. |
Note: Styles on a higher level of the table overwrite the styles on a lower level, e.g. a style of a table row or styles applied on the whole overwrite the style of a table detail.
### b) Table borders
You can use this snippet to change the style of table borders:
```xml
style="border:double"
```
Here are the different possibilities: none/hidden; dotted; dashed; double; solid.
Example:
```xml
|
```
Reminder: Pay attention, on which level of the table you add the style (table/tr/th/td).
### c) Fixed cell width
You can fix the cell width in relation to the other columns by using this snippet:
```xml
style="width:80%"
```
Example:
```xml
| ... |
... |
```
If you want to give a fixed size to the cell, you can use pixel or points instead of the percentage:
```xml
style="width:30px"
```
### d) Condition on the number of lines of the main table
In order to count the invoice line items or the quotation line items, you have to initialize the variable rowNum before the .
Here you can see the whole tag:
```xml
```
Before the end of the outputPanel and inside of the you have to add the code that increments the variable:
```xml
```
Afterwards you can use this variable in a condition.
Exemple:
```xml
```
Use case: This configuration can be useful, if you would like to display an element underneath the table, but you have to ensure that there is enough space. If the main table is too long, you element might not fit underneath, and you have to put it on the next page by using the condition on the number of the invoice/ quotation line items.
## Change the CSS stylesheet
If you want to add other styles to the style sheet, that are maybe not considered by the packaged stylesheet, you can follow these steps:
1. Go to Setup > Custom Code > **Static Resources**
2. Click on **INVOICE_STYLE**
3. Click on View file
4. Copy the content of the style into any text editor
5. Add your CSS code
6. Save as .css
7. Create a new static resource and add the new file.
8. In you Visualforce page:
```xml
```
You have to change the API name of the style sheet, by inserting the name that you gave to your static resource. 9. Save your Visualforce page.
## Code Snippets
Here you can find some code snippets that you can adapt on your needs in a few clicks:
### a) Conditions (rendered)
ISBLANK
In order to display a field according to the condition if this or another field is (not) filled out:
```xml
...
```
Note: Just add NOT if you want to check, that the filled is NOT blank.
ISNULL
Another option to check if a field is filled out:
```xml
```
Test a boolean value
You can just use the boolean field in your condition, since it already gives back the value TRUE or FALSE. The field will be displayed if the condition is TRUE.
```xml
```
If you would like to display the field, if the boolean is FALSE, you have to use the prefix NOT(condition).
IF Statements
Here you can see, how you can apply an IF Statement to a condition :
```xml
```
Conditions in the CSS
You can apply conditions also within your style tags:
```xml
```
Example of a condition: display the discount column in the main table
If you would like to display for example the Discount column only if there is actually a discount on the invoice/ quotation, you can use the check box Show Discount.
Use this condition in the style tag:
```xml
display:{!IF(sofactoapp__Factures_Client__c.sofactoapp__Afficher_remise__c, '', 'none')}">
```
Example of the header of a Discount (%) column :
```xml
{!$Label.Frisbii_Taux_Remise}
|
```
Example of the of a Discount (%) column :
```xml
|
```
b) Display an image saved in the static ressources
You can use this code to display an image that you saved in the static ressources:
```xml
```