function readOnly(count){ }
Starting November 20, the site will be set to read-only. On December 4, 2023,
forum discussions will move to the Trailblazer Community.
+ Start a Discussion
Rick MacGuiganRick MacGuigan 

Header for data table

I'm using VisualForce dataTables . How can I create a header row that spans multiple columns like in the example below ? 

DataTable Header Example
☯ BonY ☯☯ BonY ☯
Hi Rick,

If you want to table as like this, try to use apex repeat tag.
 
thanks
BonY
Rick MacGuiganRick MacGuigan
Thanks for your response. I did look at the repeat tag but wasn't clear on how to span columns in the way I need. Do you have an example ?
☯ BonY ☯☯ BonY ☯
Hi Rick,

Try like this
<table class='list'>
    <thead>
    <tr class='headerRow'>
        <th></th>
        <th colspan='3'>Group A</th>
        <th colspan='3'>Group B</th>
    </tr>
    </thead>
    <tbody>
        <apex:repeat value="{!list}" var="a">
            <tr>
                <td>{!list.1stCol}</td>
                <td>{!list.2ndCol}</td>
                <td>{!list.3rdCol}</td>
                <td>{!list.4thCol}</td>
                <td>{!list.5thCol}</td>
                <td>{!list.6thCol}</td> 
                <td>{!list.7thCol}</td>   
            </tr>
        </apex:repeat>
    </tbody>
</table>

Thanks,
BonY
Rick MacGuiganRick MacGuigan
Thanks BonY . I formatted the following but having a problem controlling the column widths and need to wrap lines that are too long. Seeems like VisualForce page is locking down some styling ? 

Here the screen shot shows the columns are blowing out the width way too much: 
User-added image

The VF page: 
<apex:page standardController="Account_Summary__c" readOnly="false" extensions="AccountSummaryController" >

<!--Formatting Styles -->   
<style>
  .headerRow .TableTitle {
    background-color: #F0F8FF !important;
    background-image: none !important; 
    color: #CC0000 !important; 
    font-size:100% !important; 
  }
 </style>  

<apex:form id="form1">
<apex:pageBlock id="block1" title="Comprehensive Risk Evaluation - General Information" >

<apex:outputPanel id="out8h">  
<table class='list'> 
    <thead>
    <tr class='headerRow'>
        <th > </th>
        <th colspan='3' align="center" >Terrorism</th>
        <th colspan='3' align="center" >Cyber</th>        

    </tr>
    <tr class='headerRow'>
     <th> Contract</th>
     <th> Additional Limit Maiden Share</th>
     <th> Limit Type</th>     
     <th> Description</th>     
     <th> Additional Limit Maiden Share</th>
     <th> Limit Type</th>     
     <th> Description</th>
     
   </tr>        
    </thead> 
    <tbody>
        <apex:repeat value="{!TerrorCyberSectionList}" var="tc">
            <tr>
                <td>{!tc.Name}</td>
                <td>{!tc.Terror_Limit_Amount__c}</td>
                <td>{!tc.Terror_Limit_Type__c}</td>
                <td>{!tc.Terror_Limit_Description__c}</td>
                <td>{!tc.Cyber_Limit_Amount__c}</td>
                <td>{!tc.Cyber_limit_Type__c}</td> 
                <td>{!tc.Cyber_Limit_Description__c}</td>   
            </tr>
        </apex:repeat>
    </tbody>
</table>
</apex:outputPanel> 

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