HTML table 影响日期范围选择器弹出对话框的样式

Question

我正在尝试实现 date range picker，它在 github 中可用。我已经按照此 link 获取代码：daterangepicker

我在 html <head> 部分


    <link rel="stylesheet" href="styles.css"> <!-- This is my custom css file -->
    <script type="text/javascript" src="https://cdn.jsdelivr.net/jquery/latest/jquery.min.js"></script>
    <script type="text/javascript" src="https://cdn.jsdelivr.net/momentjs/latest/moment.min.js"></script>
    <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.min.js"></script>
    <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.css" />
    <script src="script.js"></script> <!-- This is my javascript file -->

我已将此代码包含在我的 javascript 文件中：


    $('input[name="datefilter"]').daterangepicker({
      autoUpdateInput: false,
      locale: {
        cancelLabel: 'Clear'
      }
    });
    
    $('input[name="datefilter"]').on('apply.daterangepicker', function(ev, picker) {
        $(this).val(picker.startDate.format('MM/DD/YYYY') 
            + ' - ' + picker.endDate.format('MM/DD/YYYY'));
    });
    
    $('input[name="datefilter"]').on('cancel.daterangepicker', function(ev, picker) {
        $(this).val('');
    });

这是我的 html:


    <p id="date">
      <b>Occupancy Date</b> :<br>
      <input type="text" name="datefilter" value="" />
    </p>

现在当我运行我的代码时，弹出窗口如下所示：

可以看到，一半的日期重叠了，而且颜色搭配也不对。我希望日历的颜色是全白的。我该如何解决这个问题？

编辑： 我已经找到问题的原因，它在我的 styles.css 文件中。实际上我的 html:

里还有一个 table

<div id="employee">
     <table id="emp_details" style="display: none;"></table>
</div>

<div id="quarter_tenure">
     <p id="date"><b>Occupancy Date</b> :<br>
           <input type="text" name="datefilter" value="" />
     </p>
</div>

还有我的 styles.css:

#emp_details td, th {
    border: 1px solid #dddddd;
    text-align: left;
    padding: 8px;
}
  
#emp_details tr:nth-child(even) {
    background-color: #dddddd;
}

此样式仅适用于 #emp_details table，不适用于日历。但不知何故，它也影响了日历的样式。那么，我该怎么做才能让 styles.css 只影响我的 #emp_details table 而不是我的日历？

Answer 1

问题是这里的风格

#emp_details td, th {
    border: 1px solid #dddddd;
    text-align: left;
    padding: 8px;
}

td,th这个样式适用于所有#emp_details和th。我认为你打算将这种样式用于 td 内的所有 th 应该是 #emp_details td th 不会影响页面中的其他 table headers其他在 id #emp_detials

正确的风格应该是

#emp_details td th {
    border: 1px solid #dddddd;
    text-align: left;
    padding: 8px;
}

HTML table 影响日期范围选择器弹出对话框的样式

HTML table styles affecting date range picker pop-up dialog

html

javascript

jquery

daterangepicker