如何使用自定义css覆盖引导程序

Question

我正在使用Bootstrap，但我希望有一个包含自定义css的表，如下所示：

jsfiddle是：http://jsfiddle.net/zYvb9/3/

CSS是：

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

然而，当我在js小提琴中包含引导程序文件时，我的表就像这样：

jsfiddle是：http://jsfiddle.net/zYvb9/7/ CSS没有改变，我只在这个中包含了bootstrap文件。

正如您所看到的那样，它稍有变化，顶部边框没有圆角边框，并且单元格之间没有空格。

我不明白为什么bootstrap会改变它。有谁知道为什么？

Answer 1

Bootstrap正在修改table的原生样式，特别是这两个规则：

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

其中直接影响border-radius-*规则和单元格spacing的结果/外观，因此也会进行调整：

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

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

Answer 2

看起来自举表格样式border-collapse: collapse; border-spacing: 0正在影响您的表格。

您可以通过将border-collapse: separate和border-spacing: 1px添加到#cal table规则来解决问题。此外，您可以摆脱所有!important，因为您的ID优先。

更新了小提琴：http://jsfiddle.net/sN96M/1/