+ Start a Discussion

Visualforce Page extends past page heading

I am putting out a table with variable columns, so I need to do in html. When the table is rendered, it extends past the edge of the salesforce header. I've tried to adjust the column width in the <th> row by setting each column to 10% but can't seem to adjust any column widths. What is causing the table to go beyond the right margin of the header and how can I adjust it? Any help much appreciated.

Below is the VF, and the class definitions for the row wrapper follows that.

<apex:form >
  <apex:pageBlock id="budget">

      <apex:panelGrid columns="4" cellSpacing="10px">
         <apex:selectList label="Competency Owner" value="{!selectedCompetencyOwner}" size="1">
             <apex:selectOptions value="{!Owners}"/>
         <apex:commandButton value="Update" rerender="practices,budget"/>
         <apex:commandButton value="Resource Level" />
         <apex:commandButton value="Save"/>       

  <table class="list" border="0" cellpadding="0" cellspacing="0">
    <tr class="headerRow  ">
      <apex:repeat value="{!Headings.cellList}" var="h">
        <th width="10%">

        <td align="right">
         <apex:repeat value="{!inputRow.cellList}" var="i">        
               <input type="text" value="{!i.value}" align="right"/>

   <apex:repeat value="{!Rows}" var="row">
         <apex:repeat value="{!row.cellList}" var="c">        
           <td align="right">


Row wrapper:

public class rowWrapper {
    public List<Cell> CellList{get;set;}

public class Cell {
    public String Value{get;set;}
Try setting the width of the table to 100% - this should make it the same size as the outer containing pageblock:

<table class="list" border="0" cellpadding="0" cellspacing="0" style="width:100%">
Thanks, but that didn't do it. Same problem. Here is html for table if that helps.
3Q14 4Q14 1Q15 2Q15 3Q15 4Q15 1Q16 2Q16
Target FTE
Allocated 0 0 0 0 0 0 0 0
Under/(Over) 0 0 0 0 0 0 0 0