Sign Up ›

Browse by Topic
ShowAll Questionssorted byDate Posted
+ Start a Discussion
Rick MacGuiganRick MacGuigan 

How to set <tr> border color to same as background of cell

I am using this to achieve the backgroun in a <tr. tag on an embedded table. How can I make the white verticle lines on the cell borders the same background color to give the whole row a uniform look ?

input[type="text"]
{
color:red;
}

.red text {
color:red;
}

.gridtable{
background-color: #dedede;
border-color: #dedede;
}
</style>
........
<table id="t01" style="width:100%" >
<tr Class="gridtable">

Example of background with border lines.
Best Answer chosen by Rick MacGuigan
NekosanNekosan
Try adding border-collapse: collapse; to table style. 

input[type="text"]
{
color:red;
}

.red text {
color:red;
}

.gridtable{
background-color: #dedede;
border-color: #dedede;
}
</style>
........
<table id="t01" style="width:100%;border-collapse: collapse;" >
<tr Class="gridtable">

All Answers

NekosanNekosan
Try adding border-collapse: collapse; to table style. 

input[type="text"]
{
color:red;
}

.red text {
color:red;
}

.gridtable{
background-color: #dedede;
border-color: #dedede;
}
</style>
........
<table id="t01" style="width:100%;border-collapse: collapse;" >
<tr Class="gridtable">
This was selected as the best answer
Rick MacGuiganRick MacGuigan
Nekosan - thanks. It worked. Appreciate your response ! A much cleaner look. Salesforce support couldn't figure this out so kudos to you. 
User-added image
Rick MacGuiganRick MacGuigan
Have you ever been able to get the text labels on inputFields within a  <tr Class="gridtable"> to work ? I'd like to color the font blue but seems like the inputFields do not permit it . 
  
<table id="t01" style="width:100%;border-collapse: collapse;"  >
 <tr Class="gridtable">
     
    <th Class="gridtable"><apex:inputField value="{!audit.Policy_Information__c}"  onclick="checkAlltest(this, 'sel1')"  /> </th>
    <th Class="gridtable"><apex:inputField value="{!audit.Driver_Information__c}" onclick="checkAlltest(this, 'sel2')" /> </th>      
    <th Class="gridtable"><apex:inputField value="{!audit.Vehicle_Information__c}" onclick="checkAlltest(this, 'sel3')"  /> </th>
    <th Class="gridtable"><apex:inputField value="{!audit.Limit_Information__c}"  onclick="checkAlltest(this, 'sel4')"  />  </th>
    <th Class="gridtable"><apex:inputField value="{!audit.Rating_Information__c}" onclick="checkAlltest(this, 'sel5')"  />  </th>
    <th Class="gridtable"><apex:inputField value="{!audit.Loss_Information__c}" onclick="checkAlltest(this, 'sel6')"  />    </th>
    <th Class="gridtable"><apex:inputField value="{!audit.General_Information__c}" onclick="checkAlltest(this, 'sel7')"  /> </th>
    
</tr>

 
NekosanNekosan
Try styleClass property.
<th Class="gridtable"><apex:inputField value="{!audit.General_Information__c}"onclick="checkAlltest(this, 'sel7')" styleclass='inputtextcolor'  /> </th>
Rick MacGuiganRick MacGuigan
Nekosan, tried adding your suggestion:
<th Class="gridtable"><apex:inputField value="{!audit.General_Information__c}"onclick="checkAlltest(this, 'sel7')" styleclass='inputtextcolor'  /> </th>

to the page but it did not change the font color. Below is a larger block of the code.

  
<apex:page standardController="Audit__c" showHeader="true" extensions="CreateSample" >
<style>
input[type="text"]
{
 color:red;
}
 
 .red text {
     color:red;
 }
</style>

<!-- Begin Default Content REMOVE THIS -->
<!--Notes -->
<!--Audit__c.Audit_Sample_Type__c  here Audit_Sample_Type is Picklist field in Audit custom object -->
<!--Audit__c.Audit_Sample_Type__c=='AUTO or COMP are Picklist Field Value. -->
<!--Hello username  username is calculated field in rendered section -->
<!--Script added to collapse the rendered section -->
 
<!--  </head>   --> 

<!-- Javascript function for setting called table input fields (checkboxes) as: onclick="checkAlltest(this, 'sel2')" Sets all subordinate fields -->
<script>
function checkAlltest(ele, classname) {
    var checkboxes = document.getElementsByClassName(classname);
    if (ele.checked) {
        for (var i = 0; i < checkboxes.length; i++) {
            if (checkboxes[i].type == 'checkbox') {
                checkboxes[i].checked = true;
            }
        }

    } else {

        for (var i = 0; i < checkboxes.length; i++) {
            if (checkboxes[i].type == 'checkbox') {
                checkboxes[i].checked = false;
            }
        }
    }
}
</script>




<!--Establish control variables -->
<apex:variable var="audit" value="{!Audit__c}" /> 
<!--Render control variables --> 
<apex:variable var="ToggleSelect" value="{!audit.Audit_Sample_Type__c}" />
  
<apex:form id="form1">
<apex:pageBlock id="block1" title="Audit Sample Selection">

<apex:messages title="data incorrectly entered." style="background-color:yellow; color: red" />  
<!--  --> 
<apex:pageBlockButtons location="top">
<apex:outputPanel id="buttons">

<apex:commandButton value="Edit" action="{!Edit}"/>
<apex:commandButton value="Save" action="{!Save}"/>
<apex:commandButton value="Cancel" action="{!Cancel}"/> 
 
<apex:commandButton action="{!urlfor("/apex/PROD_Audit_Auto_PolicySample", null, [AccId=Audit__c.Id])}" value="New Sample" style="background:lightblue;color:blue" id="button1" rendered="{!audit.Audit_Sample_Type__c='Personal Auto'}" onComplete="openAuditAutoPolicySample();" />
              
</apex:outputPanel>
</apex:pageBlockButtons>


<apex:PageblockSection columns="1" > 
<apex:PageBlockSectionItem > 
<apex:outputLabel value="Audit Type"/>
<apex:actionRegion >
<apex:inputField value="{!Audit__c.Audit_Sample_Type__c}">
<apex:actionSupport event="onchange" reRender="ajaxrequest, buttons" /> 
</apex:inputField>
</apex:actionRegion>
</apex:PageBlockSectionItem>
</apex:PageblockSection>

<apex:outputPanel styleClass="sample" id="ajaxrequest">


<apex:pageBlockSection columns="1" id="section1" showHeader="false" title="General Auto Audit Information Section" rendered="{!ToggleSelect='Personal Auto'}">
<apex:inputField rendered="false" value="{!audit.Contract__c}" />
<apex:inputField value="{!audit.Personal_Auto_Product__c}" />
<font color="blue">Hello {!$User.FirstName}! , Click the sections being audited below for 'all' the samples.</font>
</apex:pageBlockSection>

<!--Start of Checklist table array -->

<apex:pageBlockSection columns="14" id="section2" showHeader="false" title="Sections to Audit" rendered="{!ToggleSelect='Personal Auto'}">

<table id="t01" style="width:100%" >
 <tr>
 <!-- TESTING -->
 <!--    <th class="red"> <apex:inputField value="{!audit.Policy_Information__c}"  onclick="checkAlltest(this)"  /> </th>  -->
    <th class="red"> <apex:inputField value="{!audit.Policy_Information__c}"  /> </th> 
    <!--<th Class="red"><apex:inputField value="{!audit.Policy_Information__c}"  onclick="checkAlltest(this)"  /> </th>  -->
    <th Class="gridtable"><apex:inputField value="{!audit.Driver_Information__c}" onclick="checkAlltest(this, 'sel2')" /> </th>      
    <th Class="gridtable"><apex:inputField value="{!audit.Vehicle_Information__c}" onclick="checkAlltest(this, 'sel3')"  /> </th>
    <th Class="gridtable"><apex:inputField value="{!audit.Limit_Information__c}"  onclick="checkAlltest(this, 'sel4')"  />  </th>
    <th Class="gridtable"><apex:inputField value="{!audit.Rating_Information__c}" onclick="checkAlltest(this, 'sel5')"  />  </th>
    <th Class="gridtable"><apex:inputField value="{!audit.Loss_Information__c}" onclick="checkAlltest(this, 'sel6')"  />    </th>
  <th Class="gridtable"><apex:inputField value="{!audit.General_Information__c}"onclick="checkAlltest(this, 'sel7')" styleclass='inputtextcolor'  /> </th>

    
</tr>
<!-- separate heading row from table -->
   <tr>
    <td>    <apex:pageBlockSectionItem > </apex:pageBlockSectionItem>     </td>
        <td>    <apex:pageBlockSectionItem > </apex:pageBlockSectionItem>     </td>
            <td>    <apex:pageBlockSectionItem > </apex:pageBlockSectionItem>     </td>
                <td>    <apex:pageBlockSectionItem > </apex:pageBlockSectionItem>     </td>
                    <td>    <apex:pageBlockSectionItem > </apex:pageBlockSectionItem>     </td>
                        <td>    <apex:pageBlockSectionItem > </apex:pageBlockSectionItem>     </td>
                            <td>    <apex:pageBlockSectionItem > </apex:pageBlockSectionItem>     </td>
  </tr>  
   
</table>

</apex:pageBlockSection>

<apex:pageBlockSection columns="1" id="section0" showHeader="true" title="Summary: General Auto Audit Information Section" rendered="{!ToggleSelect='Personal Auto'}">
<apex:outputField value="{!audit.Total_Sample_Premium__c}"/>
</apex:pageBlockSection>

<!--Start of Checklist tabbed array -->

<!-- Javascript contained within the page to control the sections.  -->
<script> twistSection(document.getElementById('{!$Component.block1.section1}').getElementsByTagName('img')[0])</script> 
<script> twistSection(document.getElementById('{!$Component.block1.section2}').getElementsByTagName('img')[0])</script>
<script> twistSection(document.getElementById('{!$Component.block1.section3}').getElementsByTagName('img')[0])</script>

</apex:outputPanel> 
</apex:pageBlock>
</apex:form>
</apex:page>



 
NekosanNekosan
can you try adding css class for inputtextcolor?  instead of input[type="text"] .
Rick MacGuiganRick MacGuigan
Still not showing the font color. I changed the CSS and referenced it in the page:

<style type="text/css">
  .inputtextcolor{
    font-color:blue;}

 .gridtable{ 
  background-color: #dedede;
  border-color: #dedede;
  font-color:blue;
 }
 </style>

  
<table id="t01" style="width:100%;border-collapse: collapse;"  >

 <tr Class="gridtable">
     
    <th Class="gridtable"><apex:inputField value="{!audit.Policy_Information__c}"  onclick="checkAlltest(this, 'sel1')"  /> </th>
    <th Class="gridtable"><apex:inputField value="{!audit.Driver_Information__c}" onclick="checkAlltest(this, 'sel2')" /> </th>      
    <th Class="gridtable"><apex:inputField value="{!audit.Vehicle_Information__c}" onclick="checkAlltest(this, 'sel3')"  /> </th>
    <th Class="gridtable"><apex:inputField value="{!audit.Limit_Information__c}"  onclick="checkAlltest(this, 'sel4')"  />  </th>
    <th Class="gridtable"><apex:inputField value="{!audit.Rating_Information__c}" onclick="checkAlltest(this, 'sel5')"  />  </th>
    <th Class="gridtable"><apex:inputField value="{!audit.Loss_Information__c}" onclick="checkAlltest(this, 'sel6')"  />    </th>
    <th Class="gridtable"><apex:inputField value="{!audit.General_Information__c}" onclick="checkAlltest(this, 'sel7')" styleclass="inputtextcolor"   /> </th>

    
</tr>



 
NekosanNekosan
You need to use color instead of font-color.

.inputtextcolor{
    color:blue;}
 
Rick MacGuiganRick MacGuigan

Made the switch but font on lable of inputField still not changing to blue.

<style type="text/css">
  .inputtextcolor{
    color:blue;}

 .gridtable{ 
  background-color: #dedede;
  border-color: #dedede;
  color:blue;
 }
 </style>
.....
<table id="t01" style="width:100%;border-collapse: collapse;"  >
<tr Class="gridtable">
    
    <th Class="gridtable"><apex:inputField value="{!audit.Policy_Information__c}"  onclick="checkAlltest(this, 'sel1')"  /> </th>
    <th Class="gridtable"><apex:inputField value="{!audit.Driver_Information__c}" onclick="checkAlltest(this, 'sel2')" /> </th>     
    <th Class="gridtable"><apex:inputField value="{!audit.Vehicle_Information__c}" onclick="checkAlltest(this, 'sel3')"  /> </th>
    <th Class="gridtable"><apex:inputField value="{!audit.Limit_Information__c}"  onclick="checkAlltest(this, 'sel4')"  />  </th>
    <th Class="gridtable"><apex:inputField value="{!audit.Rating_Information__c}" onclick="checkAlltest(this, 'sel5')"  />  </th>
    <th Class="gridtable"><apex:inputField value="{!audit.Loss_Information__c}" onclick="checkAlltest(this, 'sel6')"  />    </th>
    <!-- <th Class="gridtable"><apex:inputField value="{!audit.General_Information__c}" onclick="checkAlltest(this, 'sel7')"  /> </th> -->
    <th Class="gridtable"><apex:inputField value="{!audit.General_Information__c}" onclick="checkAlltest(this, 'sel7')" styleclass="inputtextcolor"   /> </th>   
</tr>
NekosanNekosan
Try 
 color:blue !important;

Can  you try changing color by inspect elemet?  May be its inheriting gridtable color.