自定义视觉效果内联页面上的4列

Question

我有一些值需要这样设置：

​

​

如下所示，但有四列：

​

​

我试过这种方式，但这里一团糟。(上图是一个例子，支票总额中有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>

​

我不知道如何造型，它需要看起来像它在第二张图片中显示。

任何帮助都是很好的，我是VF的新手，还不太擅长造型，我很难找到我正在寻找的东西。

Answer 1

对于在Visuaforce页面上构建非常困难的布局，你可以使用HTML和CSS的强大功能，通常它比Visuaforce标签更方便。

所以，为了在你的第一个屏幕上实现表格，我更喜欢在单元格中使用HTML表格标签，其中包括顶端:输出字段标签。