ビジュアルフォースページのapex：pageblocktableページのデフォルトの行高さを変更する方法

Question

私はSalesforce VFページが初めてです。私はVisualforceページに動的にバインドされたpageBlockTableを持っています。今では、デフォルトの行の高さを減らすために苦労しています。どんな助けでも本当に感謝しています。

Googleで列のサイズを変更するなど、多くの例が見つかりましたが、行はありません。また、私はrowclassesの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; 
}