Hi everyone,

Great day!

I need help with formatting a table in a visualforce form that's showing a table of related child records. It is comparable to the opportunity product table wherein products with prices are listed with a total. I will be posting screenshot links and I'm hoping you can help me with this. 

Table:

http://screencast.com/t/Z5A4a3gEvS0

 #TableInfo{width: 1000px; margin: 70px 0; }
        #TableInfo table{border: 1px solid #f78f1e;border-collapse: collapse;border-spacing: 0;}
        #TableInfo table tr th{background: #f78f1e;padding: 5px;text-align: center;color: #fff;font-size: 14px;font-weight: bold;}
        #TableInfo table tr td{border: 1px solid #e3e3e3;padding: 5px;text-align: center;color: #000;font-size: 12px;font-weight: bold; height:25px;}
        #TableInfo .WidthNormal{width: 240px;}
        #TableInfo .WidthSmall{width: 200px;}
        #TableInfo .SuperBold{font-size: 17px !important;}
        #TotalWeightId{text-align: right !important;padding: 0 !important;}
        #TotalWeightId span{padding: 10px 10px;background: #f78f1e;color: #fff !important;}

<div id="TableInfo">            
            <apex:dataTable value="{!Bill_of_Lading__c.Skids__r}" var="boflading" id="theTable" rowClasses="odd,even" styleClass="tableClass" border="0">                                                                                      
                                                                                                           
            <apex:column width="240">                               
            <apex:facet name="header">NO OF PCS</apex:facet>
            <apex:outputText value="{!boflading.Number_of_Pieces__c}"/>                                                                              
            </apex:column>

            <apex:column width="240">
            <apex:facet name="header">DESCRIPTION</apex:facet>
            <apex:outputText value="{!boflading.Name}"/>
            </apex:column>
            
            <apex:column width="240">
            <apex:facet name="header">DIMENSIONS</apex:facet>
            <apex:outputText value="{!boflading.Dimension__c}"/>
            </apex:column> 
            
            <apex:column width="240">
            <apex:facet name="header">WEIGHT</apex:facet>
            <apex:outputText value="{!boflading.Weight__c}"/>
            </apex:column>
            
            <apex:column width="240">
            <apex:facet name="header">UOM</apex:facet>
            <apex:outputText value="{!boflading.UOM__c}"/>      
            </apex:column>  

            <apex:column width="240">
            <tfoot>     
            <td colspan="3" id="TotalWeightId"><span>TOTAL WEIGHT</span></td>
            <td class="SuperBold" contenteditable="true"><apex:outputText value="{!Bill_of_Lading__c.Total_Weight__c}"/></td>
            <td class="SuperBold" contenteditable="true">L</td>   
            </tfoot>
            </apex:column>  

            </apex:dataTable>        
            </div>         

  public void newSkid()
    {
       if (updateSkids())
       {
          Skid__c skid=new Skid__c(Name=newSkidName, Dimension__c=newSkidDimension, Number_of_Pieces__c=newSkidNumberofPieces, UOM__c=newskiduom, Weight__c=newskidweight, Bill_of_Lading__c=getBillofLading().id);
          insert skid;
         
          newSkidName=null;
          newSkidDimension=null;
          newSkidNumberofPieces=null;
          newskidbilloflading=null; 
          newskiduom=null;
          newskidweight=null;
          skids=null;
       }
    }

 The table is supposed to look like this

http://screencast.com/t/6Aw1TMb9ng

Help on this would be appreciated!

Regards,

Pfang