title: How to modify the default row-height of apex:pageblocktable in visualforce page
body: <p>I am new to Salesforce VF pages. I have a dynamically binded pageBlockTable in my Visualforce page. Now I am struggling to reduce its default row-height. Any help is really appreciated.</p>
  
  <p>I have found a lot of examples like resizing columns in google, but not for rows. Also, I have tried adding line-height in rowclasses CSS style, but it is of no help.</p>
  
  <p>CSS style: </p>
  
  <pre><code>.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;
  
      }
  </code></pre>
  
  <p>VF page code:</p>
  
  <pre><code>&lt;apex:pageblock id="DetailsBlock"&gt;
  &lt;apex:pageblockTable value="{!lstDet}" var="oDet"   styleclass="table table-striped table-hover" id="sysTable" rowClasses="even,odd"&gt;
  
  &lt;apex:column headerClass="TableTitle" style="width: 20%;height:4%"  &gt;&lt;apex:facet name="header"&gt;&lt;font class="headerfontstyle" &gt;Name &lt;/font&gt;&lt;/apex:facet&gt; 
  &lt;font class="rowdatastyle"&gt; {!oDet.Name} &lt;/font&gt;
  &lt;/apex:column&gt;
  &lt;apex:column headerClass="TableTitle" style="width: 10%;height:4%"  &gt;&lt;apex:facet name="header"&gt;&lt;font class="headerfontstyle" &gt;Mfg&lt;/font&gt;&lt;/apex:facet&gt; 
  &lt;font class="rowdatastyle" &gt;  {!oDet.Manufacturer}&lt;/font&gt;
  &lt;/apex:column&gt;
  &lt;apex:column headerClass="TableTitle" style="width: 6%;height:4%"&gt;&lt;apex:facet name="header"&gt;&lt;font class="headerfontstyle" &gt;Type&lt;/font&gt;&lt;/apex:facet&gt; 
  &lt;font class="rowdatastyle" &gt; {!oDet.ComponentType} &lt;/font&gt;
  &lt;/apex:column&gt;
  &lt;apex:column headerClass="TableTitle" style="width: 12%;height:4%"&gt;&lt;apex:facet name="header"&gt;&lt;font class="headerfontstyle" &gt;Allocated&lt;/font&gt;&lt;/apex:facet&gt;  
  &lt;font class="rowdatastyle"&gt; {!oDet.Allocated} &lt;/font&gt;
  &lt;/apex:column&gt;                                                        
  &lt;apex:column headerClass="TableTitle" style="width: 10%;height:4%"&gt;&lt;apex:facet name="header"&gt;&lt;font class="headerfontstyle" &gt;Used&lt;/font&gt;&lt;/apex:facet&gt;  
  &lt;font class="rowdatastyle"&gt; {!oDet.Used} &lt;/font&gt;
  &lt;/apex:column&gt;                                                        
  &lt;apex:column headerClass="TableTitle" style="width: 30%;height:4%"&gt;&lt;apex:facet name="header"&gt;&lt;font class="headerfontstyle" &gt;OS Version&lt;/font&gt;&lt;/apex:facet&gt;  
  &lt;font class="rowdatastyle"&gt;{!oDet.OS} &lt;/font&gt;
  &lt;/apex:column&gt;  
  &lt;apex:column headerClass="TableTitle" id="hiddenblock" style="width: 10%;height:4%"&gt;&lt;apex:facet name="header"&gt;&lt;font class="headerfontstyle"&gt;Action&lt;/font&gt;&lt;/apex:facet&gt; 
  &lt;div class="btn-group"&gt;
  &lt;a class="btn btn-transparent-grey dropdown-toggle btn-sm" data-toggle="dropdown" href="#"&gt;
  &lt;i class="fa fa-cog"&gt;&lt;/i&gt; &lt;span class="caret"&gt;&lt;/span&gt;
  &lt;/a&gt;        &lt;ul role="menu" class="dropdown-menu dropdown-dark pull-right"&gt;
  &lt;li role="presentation"&gt;&lt;a role="menuitem" tabindex="-1" href=" "&gt;View&lt;/a&gt; &lt;/li&gt;
  &lt;li role="presentation"&gt;&lt;a role="menuitem" tabindex="-1" href=" "&gt;Create&lt;/a&gt;&lt;/li&gt;                                                                                                                                                                                                                                                                                                                                                  &lt;/ul&gt;   
  &lt;/div&gt;  
  
  &lt;/apex:column&gt;           
  &lt;/apex:pageblockTable&gt; 
  </code></pre>