How to override bootstrap table td style?

Question

I'm using Bootstrap 3.3
I have a HTML code as follows:

<div data-name="md-PersianDateTimePicker">
    <table class="table table-striped">        
        <tr>
            <td data-name="day">03</td>
            <td data-name="day">04</td>
            <td data-name="day">05</td>
            <td data-name="day">06</td>
            <td data-name="day">07</td>
            <td data-name="day">09</td>
            <td data-name="day" class="text-danger">09</td>
        </tr>
        .
        .
        .
    </table>
</div>

How can I set padding:2px to each td ?

I tested the following, it doesn't work!

[data-name="md-PersianDateTimePicker"] td{ 
   padding: 2px;
}

Answer 1

Simply increase the specificity of your selector. If what you have currently doesn't work, try adding the table into it as well:

[data-name="md-PersianDateTimePicker"] table.table.table-striped td[data-name="day"] {
    padding: 2px;
}

Answer 2

add !important specifier

[data-name="md-PersianDateTimePicker"] td{ 
   padding: 2px !important;
}

DEMO FIDDLE

NOTE :

Never use !important on site-wide css. Only use !important on page-specific css that overrides site-wide or foreign css