Change height of header in table bootstrap

Question

I have a bootstrap table :

<table class="table-bordered table-condensed table-hover">
 <thead>
  <tr>
   <th>Id</th>
   <th>ProductName</th>
   <th>Price</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <td>1</td>
   <td>bicycle</td>
   <td>5000</td>
  </tr>
 </tbody>
</table>

I want to change the height of thead ,th : "15px" .

Answer 1

With the default font-size the table head will always be bigger than 15px. You have to reduce the font-size (and the padding) to get your desired height.

thead th {
  font-size: 0.6em;
  padding: 1px !important;
  height: 15px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>

<table class="table-bordered table-condensed table-hover">
 <thead>
  <tr>
   <th>Id</th>
   <th>ProductName</th>
   <th>Price</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <td>1</td>
   <td>bicycle</td>
   <td>5000</td>
  </tr>
 </tbody>
</table>