我的 Bootstrap Datepicker 样式与我的表格样式冲突

Question

我有一个表格，我最近刚刚编辑了一个带有可滚动的粘性标题。但是，当我添加该更改时，它也影响了我的 Datepicker。有没有办法绕过这个？还是分开？

这是我为带有可滚动的表格粘性标题添加的代码：

thead:not(.ui-datepicker-calendar>thead), tbody:not(.ui-datepicker-calendar>tbody) {
display: block;
}
.table-container {
    height: 10rem;
}
td:not(.ui-datepicker-calendar) {
    word-wrap: break-word !important;
}
table:not(.ui-datepicker-calendar) {
    display: flex;
    flex-flow: column;
    height: 39.6rem;
    width: 100%;
}

thead:not(.ui-datepicker-calendar) {
    /*       head takes the height it requires, 
    and it's not scaled when table is resized */
    flex: 0 0 auto;
    width: calc(100% - 0.9em);
}

table:not(.ui-datepicker-calendar) tbody:not(.ui-datepicker-calendar>tbody) {
    /*  body takes all the remaining available space */
    flex: 1 1 auto;
    display: block;
    overflow-y: scroll;
}

    table:not(.ui-datepicker-calendar) tbody:not(.ui-datepicker-calendar>tbody) tr:not(.ui-datepicker-calendar>tr) {
        width: 100%;
    }

    table:not(.ui-datepicker-calendar) thead:not(.ui-datepicker-calendar), table:not(.ui-datepicker-calendar) tbody:not(.ui-datepicker-calendar>tbody) tr:not(.ui-datepicker-calendar>tr) {
        display: table;
        table-layout: fixed;
    }
tbody:not(.ui-datepicker-calendar) {
    height: 100px;
    overflow-y: auto;
    overflow-x: hidden;
   
}

日期选择器的代码

<div class="d-flex flex-row marginDateStart">
        <label for="StartDate" class="labelmargin">Start Date:</label>
        <input id="datepicker1" class="datepicker" name="datepicker1" value="@DateTime.Now.ToString("yyyy-MM-dd")" />
        <script>
            $('#datepicker1').datepicker({
                uiLibrary: 'bootstrap4',
                format: "yyyy/mm/dd",
                todayHighlight: true
            });
        </script>

    </div>

我使用的库

 <link rel="stylesheet" href="~/lib/bootstrap/dist/css/bootstrap.min.css" />
<link rel="stylesheet" href="~/css/site.css" type="text/css" />
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<link rel="stylesheet" href="/resources/demos/style.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

如果您检查所附图片，第一个是我制作的表格修复。它与我的日期选择器冲突，第二张图片是没有冲突的日期选择器，因为我没有添加我所做的表修复。

[带有我制作的表格修复的数据选择器][1]

[没有我制作的表格修复的日期选择器][2]

最新更新： 经过以上 CSS sn-p 代码的一些故障排除后，现在可以正常工作并且不会与 datepicker 冲突。关键是 :not(.ui-datepicker-calendar>thead) 格式以获得额外的粒度

感谢大家的帮助！

Answer 1

也许您可以尝试在您的 css 中排除 datepicker css 类。

table:not(.ui-datepicker-calendar) {
    display: flex;
    flex-flow: column;
    height: 39.6rem;
    width: 100%;
}
table > :not(.ui-datepicker-calendar) tbody {
    height: 100px;  Just for the demo          
    overflow-y: auto;  Trigger vertical scroll    
    overflow-x: hidden;  Hide the horizontal scroll 
}
/* add more for other affected css rules */

更多信息：not https://developer.mozilla.org/en-US/docs/Web/CSS/:not

Answer 2

您可以做的是：为您的自定义表指定类名并使用 datepicker 的表 id 来编辑 datepicker 表。

见下面的片段：

$('#datepicker1').datepicker({
  uiLibrary: 'bootstrap4',
  format: "yyyy/mm/dd",
  todayHighlight: true
});
$("#datepicker1").datepicker('setDate', new Date());

/*Styles for datepicker*/

#ui-datepicker-div thead {
  background-color: lightgreen;
}

/*Styles for other tables*/
.otherTables{
  background-color: lightblue;
}

<link rel="stylesheet" href="~/lib/bootstrap/dist/css/bootstrap.min.css" />
<link rel="stylesheet" href="~/css/site.css" type="text/css" />
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<link rel="stylesheet" href="/resources/demos/style.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

<div class="d-flex flex-row marginDateStart">
        <label for="StartDate" class="labelmargin">Start Date:</label>
        <input id="datepicker1" class="datepicker" name="datepicker1">
</div>
<table class="otherTables">
  <tr>
    <th>Firstname</th>
    <th>Lastname</th>
    <th>Age</th>
  </tr>
  <tr>
    <td>Jill</td>
    <td>Smith</td>
    <td>50</td>
  </tr>
</table>