Question

我想使用像这样的awesome bootstrap-datetimepicker：Awesome Example

在我的html中，我有一个具有如下特定风格的表：

original table style

我原来的HTML：

<!DOCTYPE html>
<html>
<head>
<style>
table,th,td
{
border:1px solid black;
}
</style>
</head>

<body>

<table>
  <tr>
    <td>Cell A</td>
    <td>Cell B</td>
  </tr>
</table>

</body>
</html>

但是在我包含了bootstrap-combined.min.css后，它改变了我的表样式

Table style changed

包含bootstrap-combined.min.css后的Html代码：

<!DOCTYPE html>
<html>
<head>
<style>
table,th,td
{
border:1px solid black;
}
</style>
    <link href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.2.2/css/bootstrap-combined.min.css" rel="stylesheet">
    <link rel="stylesheet" type="text/css" media="screen"
     href="http://tarruda.github.com/bootstrap-datetimepicker/assets/css/bootstrap-datetimepicker.min.css">
</head>

<body>

<table>
  <tr>
    <td>Cell A</td>
    <td>Cell B</td>
  </tr>
</table>

</body>
</html>

您可以在此处尝试代码：try it here

导致更改表格样式的可能原因是什么？如何解决此问题？

Answer 1

enter image description here 试试这个

table,th,td
{
border:1px solid black;
border-spacing: 1px;
padding:1px;
border-collapse: separate;
}

Answer 2

在bootstrap CSS中有表的默认样式，你可以覆盖这些类或删除它们。

这种默认样式是在bootstrap css中你可以删除或覆盖这些。

table {
    max-width: 100%;
    background-color: @table-bg;
} 
th {
    text-align: left;
}

如何在包含bootstrap-combined.min.css之后阻止原始表格样式的改变？

2 个答案: