how to have custom css overrule bootstrap

Tags: html,css,twitter-bootstrap

Problem :

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

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:

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?

---

Solution :

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/