How to give height of table thead in bootstrap theme of drupal

[newcoder1010]

Hi,

 

This is my site. I created a views table and I simply try to give height to table thead but it is not working. If you could help me with css, please.

 

http://godrupal.info/xpressauto/?q=xpress-vehicles-inventory-in-atlantic-city-nj

<table class="views-table cols-5 table table-hover table-striped">
         <thead>
      <tr>
                  <th class="views-field views-field-field-main-image">
            Image          </th>
                  <th class="views-field views-field-field-car-make">
            Make          </th>
      </tr>
    </thead>
    
</table>

.views-table th {background:gray;height:40px; color:white;} 

background colors and colors are working but height is not working. when I inspect in chrome it says dim is 1140px x 100px for thead. By inspecting, I could not find out which file has the dim info.

 

Can you help me to make the th height 40px?

 

Thanks.

 

[dsonesuk]

You have class 'views-field-field-main-image' within the th element, so

.view-xpress-vehicles-inventory-in-atlantic-city-nj .views-field-field-main-image {
    height: 100px;
    width: 200px;
}

a few lines below

.views-table th {
    background: none repeat scroll 0 0 gray;
    color: white;
    height: 40px;
    margin-top: 10px;
}

will overrule 40px height, i don't know why class 'views-field-field-main-image' is even in the th element in the first place?

[newcoder1010]

I have removed this code:

	.view-xpress-vehicles-inventory-in-atlantic-city-nj  .views-field-field-main-image {width:200px; height:100px;}

I have added this code:

.views-table th {
    background: none repeat scroll 0 0 gray;
    color: white;
    height: 40px;
    margin-top: 10px;
}

When i inspect the header on my page, I see thead dim is 1140px x 50px. I expected the height to be 40px instead.

 

Can you advise?

[dsonesuk]

The height of thead is determined by content/margins/padding/borders/height the th element is using padding and borders, THAT is where the extra 10px is coming from.

[newcoder1010]

Now, I have this code. Height is still 50px.

.views-table th {
    background: none repeat scroll 0 0 gray;
    color: white;
}

Edited February 14, 2016 by newcoder1010

[dsonesuk]

Yes! but IF you look, you will see you have a listing of th{height: 40px;} which seems to be in a minimized cached css file.

 

http://godrupal.info/xpressauto/sites/default/files/css/css_GyolChYIQGdpJjWsdQ5nQPcVYTi4re1EopQIZsWPC5U.css

 

You need to turn off caching of site and clear, if you plan to make amendments, else you will always get this problem, also your caching seems to link to multiple caching of the same files?

Edited February 14, 2016 by dsonesuk

[newcoder1010]

Thank you for the information. I will find out on that how to turn it off.