how to have custom css overrule bootstrap

Question

I'm using Bootstrap but I want to have a table with custom css which looks like this:

enter image description here

The jsfiddle is: http://jsfiddle.net/zYvb9/3/

The CSS is:

#cal {
    font-family: Arial, sans-serif !important;
}
#cal table {
    width: 100% !important;
    -webkit-border-top-left-radius: 10px !important;
    -webkit-border-top-right-radius: 10px !important;
    -moz-border-radius-topleft: 10px !important;
    -moz-border-radius-topright: 10px !important;
    border-top-left-radius: 10px !important;
    border-top-right-radius: 10px !important;
    border: 1px solid #D8DCDF !important;
}
#cal table td {
    background-color: #EEEEEE !important;
    border: 1px solid #D8DCDF !important;
    font-weight: normal !important;
    opacity: 0.7 !important;
    padding: 0.2em !important;
    text-align: right !important;
 }

However when I include the bootstrap files in the js fiddle my table becomes like this:

enter image description here

The jsfiddle is: http://jsfiddle.net/zYvb9/7/ the CSS doesnt change, I only include the bootstrap files in this one.

As you can see it changes a little, the top border doesn't have a rounded border and theres no space between the cells.

I dont understand why bootstrap changes it. Does anyone know why?

brenna · Accepted Answer · 2014-02-03 06:15:02Z

1

Looks like the bootstrap table styles border-collapse: collapse; border-spacing: 0 are affecting your table.

You can fix by adding border-collapse: separate and border-spacing: 1px to your #cal table rule. Also, you can get rid off all those !importants, since your ID will take precedence.

Updated fiddle: http://jsfiddle.net/sN96M/1/

edited Feb 3, 2014 at 6:15

answered Feb 2, 2014 at 19:40

brenna

7786 silver badges5 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

MackieeE · Accepted Answer · 2014-02-02 19:36:40Z

1

Bootstrap is modifying the native styles for table, these two rules in particular:

//Bootstrap's table rules
table {
   border-collapse: collapse;
   border-spacing: 0;
}

Both of which in-directly effect the outcome/look of the border-radius-* rules and cell spacing, thus adjust too:

table {
   border-collapse: separate;
   border-spacing: 2px;
}

http://jsfiddle.net/QGw22/1/

answered Feb 2, 2014 at 19:36

MackieeE

11.9k4 gold badges41 silver badges58 bronze badges

Collectives™ on Stack Overflow

how to have custom css overrule bootstrap

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related