日期时间选择器继承了我 table 的样式

Question

我正在使用来自 eonasdan (https://github.com/Eonasdan/bootstrap-datetimepicker)

的日期选择器

效果很好，但是当我把它放在 table 中时，它继承了 table 的样式。就好像日期选择器也变成了 table.

我怎样才能避免这种情况？

我的 CSS 中有以下内容：

table.table {
    tr {
        th {
            color: #ff0000;  //red
        }
     }
  }

这是我的 html 文件：

<table class="table">
    <tr>
      <th>Reconcile Date</th>
    </tr>
    <tr>
      <td>
        <div class="pickdate">
          <input type="text" placeholder="Reconcile Date" class="form-control ">
        </div>
      </td>
    </tr>
</table>

这会将我的 table header 中的文本设置为红色。它也将我的日期选择器中的星期几和月份名称设置为红色。注意 pickdate class 加载 datepicker

Answer 1

您可以将以下规则添加到样式表中以自定义日期时间选择器样式：

.bootstrap-datetimepicker-widget {
  table {
    tr {
      th {
        color: black;
      }
    }
  }
}

请注意，选择器具有 debug 选项，允许您检查组件的 HTML 以简化样式自定义。

工作示例：

jQuery('#dates-ifbZ6A4b6r568bad40cd473').datetimepicker({
  format: "DD/MM/YYYY", debug: true
});

table.table tr th {
  color: #ff0000;
}

.bootstrap-datetimepicker-widget table tr th {
  color: #000000;
}

<link href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.6/css/bootstrap.css" rel="stylesheet"/>
<link href="//cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.37/css/bootstrap-datetimepicker.css" rel="stylesheet"/>

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/moment.js/2.13.0/moment.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.6/js/bootstrap.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.37/js/bootstrap-datetimepicker.min.js"></script>

<table class="table">
  <tr>
    <th>Debt Ref</th>
    <th>Reconcile Date</th>
  </tr>
  <tr>
    <td>
      <div>NOR087-DAN052</div>
    </td>
    <td>
      <div class="col-sm-12">
        <input type="text" placeholder="Reconcile Date" name="dates[ifbZ6A4b6r568bad40cd473]" id="dates-ifbZ6A4b6r568bad40cd473" class="form-control ">
      </div>
    </td>
  </tr>
</table>
<p>
 The text in the datepicker shouldn't be red
</p>

Answer 2

通过使用 Google Chrome 的检查工具，我能够在您的日期选择器 table 上找到类之一并添加 CSS在那个级别。这是 CSS 和 jsfiddle link:

 .table tr th{ color: red; }

 .table-condensed thead tr th{ color: black;}

https://jsfiddle.net/w8gmcgv4/5/

如果这些对您有用，请告诉我。谢谢！

日期时间选择器继承了我 table 的样式

Datetime picker inherits style from my table

eonasdan-datetimepicker