So ändern Sie die Standardzeilenhöhe des Apex: pageblocktable in der visualforce-Seite

Question

Ich bin neu in Salesforce VF-Seiten. Ich habe eine pageBlockTable mit dynamischer Bindung auf meiner Visualforce-Seite. Jetzt kämpfe ich, um seine Standardreihenhöhe zu verringern. Jede Hilfe wird wirklich geschätzt.

Ich habe eine Menge Beispiele gefunden, wie Spalten in Google skalieren, aber nicht für Zeilen. Außerdem habe ich versucht, Zeilenhöhe im CSS-Stil von Zeilenklassen hinzuzufügen, aber das hilft nicht.

CSS-Stil:

.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 Seitencode:

<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

Bitte entfernen Sie alle Stile innerhalb <apex:column> und es sollte einfach funktionieren. Halten Sie unter Linien:

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