CODEWITHSUNDEEP
jquerycsstwitter-bootstraptwitter-bootstrap-3bootstrap-table
Math9
Math9

Reputation: 99

Change height of header in table bootstrap

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" .

Upvotes: 3

Views: 13403

Answers (5)

nareeboy
nareeboy

Reputation: 149

You have to overwrite the css from bootstrap, so add a class to the table e.g class="my-table".

  .my-table thead th {
    padding: 10px 0 5px 0 !important;
  }

I am just picking out numbers, but you will need to make this equal by changing the numbers I have added.

The main thing is to add the !important text after the css. This will overwrite the bootstrap css. Also take note. when writing css: padding: 10px 0 5px 0, the first number is padding-top, the 2nd number padding-right, third number is padding-bottom and the forth number is padding-left.

Upvotes: 0

n2o
n2o

Reputation: 6477

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>

Upvotes: 3

BigMonkey89WithaLeg
BigMonkey89WithaLeg

Reputation: 315

in your html file where you have the bootstrap cdn link or the local directory path, after the boostrap link add the path to you css file. Always add your css file link after the bootsrap link so it overwrites any of the bootstrap css.

<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link rel="stylesheet" type="text/css" href="yourpathname.css">

then go to your css file and add: You would have to add something greater than 15 pixels.

 th {
        height: 50px;
    }

Upvotes: 0

Tonza
Tonza

Reputation: 650

There is two ways

Css file or <style></style>

<style>
    thead th{
       Height: 15px;
    }
</style>


<thead>
    <th style="height: 15px"></th>
<thead>

Upvotes: 1

Friend
Friend

Reputation: 516

Try this css

   table th, table thread {
    height: 80px;
}

Upvotes: 0

Related Questions