カスタムビジュアル力インラインページ上の4列

Question

私はこのような設定する必要がある値があります。このように表示さ

を、しかし、4つの列を持つ：

私はこの方法を試しましたが、これは混乱しています...（上の写真は例であり、小切手の合計で0.00ドルのインラインで表示されます）

私が使用しているコードは次のとおりです。

<apex:page standardController="BookingEvent__c" extensions="EventInclusiveTotalPriceInlineExt" standardStylesheets="true" tabstyle="BookingEvent__c" docType="html-5.0"> 
 
    <apex:form> 
 
    <apex:pageBlock mode="maindetail"> 
 
     <apex:pageBlockSection columns="4"> 
 
     <apex:outputfield value="{!be.ForecastRevenue1__c}"></apex:outputfield> 
 
     <apex:outputfield value="{!be.ForecastRevenue2__c}"></apex:outputfield> 
 
     <apex:outputfield value="{!be.ForecastRevenue3__c}"></apex:outputfield> 
 
     <apex:outputfield value="{!be.ForecastRevenue4__c}"></apex:outputfield> 
 
     <apex:outputfield value="{!be.ForecastRevenue5__c}"></apex:outputfield> 
 
     <apex:outputfield value="{!be.ForecastRevenue6__c}"></apex:outputfield> 
 
     <apex:outputfield value="{!be.ForecastRevenue7__c}"></apex:outputfield> 
 
     <apex:outputfield value="{!be.ForecastRevenue8__c}"></apex:outputfield> 
 
     <apex:outputfield value="{!be.ForecastRevenue9__c}"></apex:outputfield> 
 
     <apex:outputfield value="{!be.ForecastRevenue10__c}"></apex:outputfield> 
 
     <apex:outputfield value="{!be.ForecastRevenue11__c}"></apex:outputfield> 
 
     <apex:outputfield value="{!be.ForecastRevenue12__c}"></apex:outputfield> 
 
     <apex:outputfield value="{!be.ForecastRevenue13__c}"></apex:outputfield> 
 
     <apex:outputfield value="{!be.ForecastRevenue14__c}"></apex:outputfield> 
 
     <apex:outputfield value="{!be.ForecastRevenue15__c}"></apex:outputfield> 
 
     </apex:pageBlockSection> 
 
    </apex:pageBlock> 
 
    </apex:form> 
 
</apex:page>

私はスタイルする方法がわからない、それはそれは第二のPICに表示されているように見える必要があります。

私はVFを初め、スタイリングではあまり役に立ちませんし、私が探しているものを正確に見つけ出すのに苦労しています。

Answer 1

Visuaforceページでかなり難しいレイアウトを構築するには、HTMLとCSSの機能を使うことができます。Visuaforceタグよりも便利です。

したがって、最初の画面でテーブルを実装するには、apex：outputfieldタグが含まれているセルでHTMLテーブルタグを使用することをお勧めします。