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;
}

@SajadKaruthedath you are rigth, but the time difference is only one minute, I couldn't see your answer ! — vals, Dec 20 '14 at 11:43
@vals : i was telling you to upvote my answer if it is correct :p — Sajad Karuthedath, Dec 20 '14 at 12:30

score 5 · Accepted Answer · answered Dec 20 '14 at 11:04

5

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;
}

answered Dec 20 '14 at 11:04

James Donnelly

126,410
34
208
218

Sorry, I wanna `[data-name="md-PersianDateTimePicker"] td` instead? – Mohammad Dayyan Dec 20 '14 at 11:07
@Mohammad This does select the `td` elements as those have the `[data-name]` attribute. – James Donnelly Dec 20 '14 at 11:09
Why include the table here. If I am less specific (e.g. all tds), it should also work? – Timo Feb 11 '21 at 19:00

score 1 · Answer 2 · edited Dec 21 '14 at 06:41

1

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

edited Dec 21 '14 at 06:41

user229044

232,980
40
330
338

answered Dec 20 '14 at 11:14

Sajad Karuthedath

14,987
4
32
49

1

`!important` is almost always unnecessary and is usually regarded as bad practice. All `!important` does is offer a hacky way of increasing specificity, but in turn it makes the CSS much harder to maintain. – James Donnelly Dec 20 '14 at 11:19
Relevant, but bad. See the answer to this question: http://stackoverflow.com/q/15582385/1317805. – James Donnelly Dec 20 '14 at 11:22
Wasn't me who down voted. Answers which recommend `!important` are often greeted with a negative response. As I mentioned before, there's simply no need to use it. – James Donnelly Dec 20 '14 at 11:24
@JamesDonnelly : so you are telling that never use !important anywhere ? – Sajad Karuthedath Dec 20 '14 at 11:27
I don't personally, no. If your CSS is well maintained there's really no reason to need to use it, ever. – James Donnelly Dec 20 '14 at 11:29
@JamesDonnelly check my note – Sajad Karuthedath Dec 20 '14 at 11:31

How to override bootstrap table td style?

2 Answers2

Linked