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:

enter image description here

The jsfiddle is:

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: 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:

    CSS Howto..

    How do I center a button in html5?

    CSS height as a variable and how to calculate 60% of total screen size

    How can I display a list in an x by y fashion?

    How can I place two DIVs inside a horizontal fixed header and make all the content vertically align?

    How can I stretch my navigation and content area height to 100% in CSS?

    How to increase the width size of JQuery UI Tooltip by its default value?

    How to horizontally center-align the content of a div by manipulating the CSS of the wrapper div only?

    How do I divide all margins but last to even out space?

    Problems with jQuery Image Slideshow / Rotating Banner using timeout / interval

    How to remove free jqgrid own horizontal scrollbar if autowidth:true is used

    how to add a different css to last mysql query result using php

    How to link an image in input text box using css

    How to put a css tag in an element if another has this element [closed]

    How to Convert RGB to HEX ( for Gradients )

    CSS How to fix element position after some scroll without using jquery

    how to recreate tex's over- underbracket using css

    How do you target div last-child within another div?

    How to animate all except one feature with CSS

    How can i inherit properties from the css id rule to the css class?

    How to create different shape in css?

    How to tell the code to choose between two variables and make them equal?

    How to add fade in and fade out when changing between texts in javascript

    Css how to replace block after click button

    Using css modules, how can I use composes to include a list of variables for colors

    How to alternate rowcolor in a GridView using pure CSS?

    How do you design your CSS?

    How to select the last element within an element regardless of type in CSS?

    How to identify is a blog post has been selected or not?

    continue with same Show and hide divs when we change page

    How to test for existence of CSS class in JavaScript without jQuery?