bootstrap reduce row padding

Question

I am using Bootstrap 3.x with a table definition like this

<table class="table table-hover table-condensed table-striped table-bordered">

Pretty standard stuff

I want to reduce the default vertical padding on the cells - want to reduce the padding on cells further. I know that table-condensed reduces the vertical padding by 50%. I want to reduce it to just 1px.

Where do I make the change? I have tried going through bootstrap.min.css but can't find anything to modify there - nothing I understand

Many thanks in advance

Best wishes

Iyer

Answer 1

It's pretty easy if you know how to use inspector tool of your browser (Right click->Inspect Element). If you want to learn CSS this would be a very important tool.

So find this property:

.table-condensed>thead>tr>th, .table-condensed>tbody>tr>th, .table-condensed>tfoot>tr>th, .table-condensed>thead>tr>td, .table-condensed>tbody>tr>td, .table-condensed>tfoot>tr>td{
    padding: 5px;
}

which has padding: 5px;, change it to 1px.

Here's how it looks when changed.