Question

我是Salesforce VF页面的新手。我的Visualforce页面中有一个动态绑定的pageBlockTable。现在我正在努力减少它的默认行高。任何帮助都非常感谢。

我找到了很多例子，例如在google中调整列的大小，但不是用于行。此外，我尝试在行类CSS样式中添加行高，但它没有任何帮助。

CSS样式：

.headerfontstyle
        {
            font-size:12px !important;
        } 
        .rowdatastyle
        {
            color:#333;
            font-size:11px !important;
        } 
        .Tokenfontstyle
        {
             color:#333;
            font-size:12px !important;
        } 
        .odd { 
        background-color: #E8E8E8 !important;
       line-height: 5px !important;

      }
    .even {
        background-color: #FCF7F7 !important;
        line-height: 5px !important;

    }

VF页面代码：

<apex:pageblock id="DetailsBlock">
<apex:pageblockTable value="{!lstDet}" var="oDet"   styleclass="table table-striped table-hover" id="sysTable" rowClasses="even,odd">

<apex:column headerClass="TableTitle" style="width: 20%;height:4%"  ><apex:facet name="header"><font class="headerfontstyle" >Name </font></apex:facet> 
<font class="rowdatastyle"> {!oDet.Name} </font>
</apex:column>
<apex:column headerClass="TableTitle" style="width: 10%;height:4%"  ><apex:facet name="header"><font class="headerfontstyle" >Mfg</font></apex:facet> 
<font class="rowdatastyle" >  {!oDet.Manufacturer}</font>
</apex:column>
<apex:column headerClass="TableTitle" style="width: 6%;height:4%"><apex:facet name="header"><font class="headerfontstyle" >Type</font></apex:facet> 
<font class="rowdatastyle" > {!oDet.ComponentType} </font>
</apex:column>
<apex:column headerClass="TableTitle" style="width: 12%;height:4%"><apex:facet name="header"><font class="headerfontstyle" >Allocated</font></apex:facet>  
<font class="rowdatastyle"> {!oDet.Allocated} </font>
</apex:column>                                                        
<apex:column headerClass="TableTitle" style="width: 10%;height:4%"><apex:facet name="header"><font class="headerfontstyle" >Used</font></apex:facet>  
<font class="rowdatastyle"> {!oDet.Used} </font>
</apex:column>                                                        
<apex:column headerClass="TableTitle" style="width: 30%;height:4%"><apex:facet name="header"><font class="headerfontstyle" >OS Version</font></apex:facet>  
<font class="rowdatastyle">{!oDet.OS} </font>
</apex:column>  
<apex:column headerClass="TableTitle" id="hiddenblock" style="width: 10%;height:4%"><apex:facet name="header"><font class="headerfontstyle">Action</font></apex:facet> 
<div class="btn-group">
<a class="btn btn-transparent-grey dropdown-toggle btn-sm" data-toggle="dropdown" href="#">
<i class="fa fa-cog"></i> <span class="caret"></span>
</a>        <ul role="menu" class="dropdown-menu dropdown-dark pull-right">
<li role="presentation"><a role="menuitem" tabindex="-1" href=" ">View</a> </li>
<li role="presentation"><a role="menuitem" tabindex="-1" href=" ">Create</a></li>                                                                                                                                                                                                                                                                                                                                                  </ul>   
</div>  

</apex:column>           
</apex:pageblockTable>

Answer 1

请删除<apex:column>中的所有样式，它应该可以正常工作。保持在以下几行：

.odd { 
    background-color: #E8E8E8 !important;
    line-height: 5px !important;
}
.even {
    background-color: #FCF7F7 !important;
    line-height: 5px !important;
}

如何在visualforce页面中修改apex：pageblocktable的默认行高

1 个答案: