function readOnly(count){ }
Sign Up ›
Starting November 20, the site will be set to read-only. On December 4, 2023,
forum discussions will move to the Trailblazer Community.
Learn More

Browse by Topic
ShowAll Questionssorted byDate Posted
+ Start a Discussion
JeffreyStevensJeffreyStevens 

css in component

Can I put a style tage in a component?

For example? 
<apex:component id="AComponent">

	<style type="text/css">
		.THIS.table.td {border:1px solid black;}
	</style>
	
	<table >
		<th>
			<td style="border:1px solid black;">Col1</td>
			<td>Col2</td>
			<td>Col3</td>
		</th>
		<tr>
			<td>[Col1 Data...]</td>
			<td>[Col2 Data...]</td>
			<td>[Col3 Data...]</td>		
		</tr>
	</table>
	
</apex:component>

Col1 header has a border around it, Col2 and 3 do not.

Am I missing something?
Best Answer chosen by JeffreyStevens
pconpcon
I would keep the style tag in your component since it's styling the component.  I would do something like the following
  
<apex:component id="AComponent">
    <style type="text/css">
        #myTable td {
            border:1px solid black !important;
        }
    </style>	
    <table id="myTable">
        <th>
            <td>Col1</td>
            <td>Col2</td>
            <td>Col3</td>
        </th>
        <tr>
            <td>[Col1 Data...]</td>
            <td>[Col2 Data...]</td>
            <td>[Col3 Data...]</td>		
        </tr>
    </table>	
</apex:component>

 

All Answers

pconpcon
The reason the first column header has a border is that you have the style directly on the td.  That will take precidence over all of the other styles.  However you CSS on line 4 should read below
  
<style type="text/css">
    table.td {
        border: 1px solid black !important;
    }
</style>

This will select every table's td and will but a border around them.  You are probably better putting a class or id on your table and adding that to your CSS selector.
Gaurav PathakGaurav Pathak
Hi JeffreyStevens,

    I am agree with ' PCON ' , You can also use this code for better result, 
         <style>
                 table {
    border-collapse: collapse !important;
                         }

table, th, td {
    border: 1px solid black !important;
                  }
         </style>

Thanks!!
JeffreyStevensJeffreyStevens
Yep - got that - Thanks.

However, what I'm trying to understand is - is there any difference when the style tags are in a COMPONENT.  And how does the THIS. play into it?

Thanks
pconpcon
I'm not sure where you are getting THIS from.  It's not a valid CSS selector.
JeffreyStevensJeffreyStevens
I'm getting the THIS from the Lightning Components Developers guide.  Trying to figure out if it's the same in Visualforce Components.

https://developer.salesforce.com/docs/atlas.en-us.lightning.meta/lightning/components_css.htm

 
pconpcon
Yes, that selector only works in Lightning since it is using SCSS.  If you want your CSS to not interact with anything at the page level you should make a more specific selector by placing an Id or a class on your elements and using that as part of your CSS selector.
JeffreyStevensJeffreyStevens
Okay - that makes sense.  And again - that would go in the Style tag in my page code, not in the component code - right?
pconpcon
I would keep the style tag in your component since it's styling the component.  I would do something like the following
  
<apex:component id="AComponent">
    <style type="text/css">
        #myTable td {
            border:1px solid black !important;
        }
    </style>	
    <table id="myTable">
        <th>
            <td>Col1</td>
            <td>Col2</td>
            <td>Col3</td>
        </th>
        <tr>
            <td>[Col1 Data...]</td>
            <td>[Col2 Data...]</td>
            <td>[Col3 Data...]</td>		
        </tr>
    </table>	
</apex:component>

 
This was selected as the best answer
JeffreyStevensJeffreyStevens
Ok - Thanks. Makes sense.

One more thing - what's with the !important - that's new to me.  What is it for?
pconpcon
The !important tells CSS to use this regardless of if your selector is not the most specific selector.  It may not be needed but I've found that is better to use it in Salesforce so that if they update their CSS it doesn't mess up yours.