Apex Code Development You need to sign in to do that
Don't have an account?
karthic sankar 9 how to properly format table in VisualForce
Hi Guru's,
Can you please suggest me in bringing up this below table in proper format.
<apex:page controller="TestForValues">
<apex:form >
<apex:pageBlock title="Core Categories">
<div styleClass="labelCol vfLabelColTextWrap">
<table border="1px" width="100%" height="80%" style="page-break-inside:auto;">
<tr>
<th>Core Categories</th>
<th>Guideline</th>
<th>Monday</th>
<th>Tueday</th>
<th>Wednesday</th>
<th>Thursday</th>
<th>Friday</th>
</tr>
<tr>
<th>Pre-Vet Reviews</th>
<th>180 Mins</th>
<td><apex:inputText value="{!preVetReviews}"/></td>
<td><apex:inputText value="{!preVetReviews_Tue}"/></td>
<td><apex:inputText value="{!preVetReviews_Wed}"/></td>
<td><apex:inputText value="{!preVetReviews_Thur}"/></td>
<td><apex:inputText value="{!preVetReviews_Fri}"/></td>
</tr>
<tr>
<th>Pre-Vet Reviews</th>
<th>180 Mins</th>
<apex:outputText value="{!preVetReviews}"/>
<td><apex:inputText /></td>
<td><apex:inputText /></td>
<td><apex:inputText /></td>
<td><apex:inputText /></td>
<td><apex:inputText /></td>
</tr>
</table>
</div>
<apex:pageBlockButtons >
<apex:commandButton value="Save" action="{!saveDetails}"/>
<apex:commandButton value="Save All" action="{!saveAllDetails}"/>
<apex:commandButton value="Submit" action="{!submitDetails}"/>
</apex:pageBlockButtons>
</apex:pageBlock>
</apex:form>
</apex:page>
I need the table to be properly aligned, like all the inputText aligned to coloumns.
Can you please suggest me in bringing up this below table in proper format.
<apex:page controller="TestForValues">
<apex:form >
<apex:pageBlock title="Core Categories">
<div styleClass="labelCol vfLabelColTextWrap">
<table border="1px" width="100%" height="80%" style="page-break-inside:auto;">
<tr>
<th>Core Categories</th>
<th>Guideline</th>
<th>Monday</th>
<th>Tueday</th>
<th>Wednesday</th>
<th>Thursday</th>
<th>Friday</th>
</tr>
<tr>
<th>Pre-Vet Reviews</th>
<th>180 Mins</th>
<td><apex:inputText value="{!preVetReviews}"/></td>
<td><apex:inputText value="{!preVetReviews_Tue}"/></td>
<td><apex:inputText value="{!preVetReviews_Wed}"/></td>
<td><apex:inputText value="{!preVetReviews_Thur}"/></td>
<td><apex:inputText value="{!preVetReviews_Fri}"/></td>
</tr>
<tr>
<th>Pre-Vet Reviews</th>
<th>180 Mins</th>
<apex:outputText value="{!preVetReviews}"/>
<td><apex:inputText /></td>
<td><apex:inputText /></td>
<td><apex:inputText /></td>
<td><apex:inputText /></td>
<td><apex:inputText /></td>
</tr>
</table>
</div>
<apex:pageBlockButtons >
<apex:commandButton value="Save" action="{!saveDetails}"/>
<apex:commandButton value="Save All" action="{!saveAllDetails}"/>
<apex:commandButton value="Submit" action="{!submitDetails}"/>
</apex:pageBlockButtons>
</apex:pageBlock>
</apex:form>
</apex:page>
As you are using html tags, can you try checking if the issue persists if you are using salesforce supported tags in visualforce page, for reference the tags would be like: <apex:pageBlockTable>.
For reference I have a link that could help with your implementation using salesforce supported tags.
>>https://www.salesforceben.com/code-samples-using-datatables-js-visualforce-via-standard-custom-controllers/
Aditionally, you can give css to the visualforce pages similar to the ones in the link- https://developer.salesforce.com/docs/atlas.en-us.pages.meta/pages/pages_styling_adding_stylesheets.htm
I hope this helps.
Regards,
Anutej