自定义视觉强制内联页面上的4列

Question

我的值需要像这样设置：

显示如下，但有四列：

我试过这种方式，但这很麻烦......（上面的图片是一个例子，内联支票总额为0.00美元）：

我使用的代码是：

＆＃13;

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

我不知道如何设置风格，它需要看起来像是在第二张图片中显示。

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

Answer 1

要在Visuaforce页面上构建相当困难的布局，您可以使用HTML和CSS的强大功能，这通常比Visuaforce标签更方便。

因此，为了在第一个屏幕上实现表格，我宁愿在包含apex：outputfield标签的单元格中使用HTML表格标签。