表内的 Bootstrap 4 datetimepicker 设计不正确

Question

我在使用 Bootstrap 4 时遇到了问题，因为它在表格内的输入字段上显示日历 - 整个设计看起来很奇怪并且无法正确显示。如果输入字段在表格之外，则设计良好。

它应该是什么样子：

CSS 文件包含在 BundleConfig.cs 中

编辑：这是表格的 CSS 样式：

    .table thead:not(.domispicker) {
    background: linear-gradient(to bottom, #187D99 0%,#145F75 1%,#145F75 26%,#187D99 100%);
    color: white;
}

.table tbody tr:not(.domispicker), .table tbody tr:not(.domispicker) input, .table tbody tr:not(.domispicker) select, .table tbody tr:not(.domispicker) textarea {
    background: linear-gradient(to bottom, #f2f2f2 0%,#feffe8 100%) !important;
}

th:not(.domispicker), td:not(.domispicker) {
    vertical-align: middle !important;
}

我在类中使用“domispicker”作为输入元素，但样式仍然被覆盖。

表格 html 如下所示：

<tbody data-bind="foreach: documentData">
    <tr data-bind="click :$parent.documentDataSelectRow.bind($data,$index()),
                        css: { 'row-selected': $parent.documentDataSelectedRowPosition() != null && $index() == $parent.documentDataSelectedRowPosition() && ForDelete() == false, 'for-delete': ForDelete() == true }">
        <td class="checkbox-column"><span class="fa fa-upload" style="color:darkgreen" data-bind="visible: Id() == 0"></span></td>
        <td>
            <input type="text" class="form-control input-sm" data-bind="value: Description, attr : {'disabled' :  (ForDelete() == true|| OnlyRead() == true) }, event:{ change: $parent.documentDataModified}">
        </td>
        <td data-bind="text: Id() != 0 ? TypeName : '@SharedResources.Index.MedicalDocument', attr : {'disabled' : ForDelete }"></td>
        <td style="position: relative">
            <input id="Doc`enter code here`umentDate" type="text" class="form-control search-input searching-date-from-to picker domispicker" data-bind="datePicker: DocumentDate, maxDate: new Date(), valueUpdate: 'afterkeydown',
                                       attr : {'disabled' : (ForDelete() == true || OnlyRead() == true) }, event:{ click: $parent.documentDataModified}" placeholder="@SharedResources.Index.Date" />
        </td>
        <td id="btnDownload" class="action-column">
            <a style="text-decoration:none;" class="fa fa-download download-nohover" title="@SharedResources.Index.Download" data-bind="attr: { href: DownloadLink },visible: Id() != 0 && ForDelete() == false, click: function(){window.location.href=DownloadLink();}"></a>
        </td>
        <td class="action-column">
            <div class="row-delete fa fa-share icon-flip" title="@SharedResources.Index.Undo" style="color: #096224; cursor: pointer;" data-bind="click: $parent.documentDataUndoRemove, visible: ForDelete() == true"></div>
            <div class="row-delete fa fa-minus-circle" title="@SharedResources.Index.Delete" style="color: #9E0101;cursor: pointer;" data-bind="click: $parent.documentDataRemove, visible: ForDelete() == false, css: { 'icon-disabled': OnlyRead() }"></div>
        </td>
    </tr>
</tbody>

Answer 1

将自定义类添加到您的主表，并使用child combinator 仅设置该表的直接子级样式（同时删除您当前的 CSS 代码）。这将防止在选择器中使用的表格样式。

HTML：

<table class="table my-table...

CSS：

.my-table > thead {
  background: linear-gradient(to bottom, #187d99 0%, #145f75 1%, #145f75 26%, #187d99 100%);
  color: white;
}
.my-table > tbody > tr,
.my-table > tbody > tr input,
.my-table > tbody > tr select,
.my-table > tbody > tr textarea {
  background: linear-gradient(to bottom, #f2f2f2 0%, #feffe8 100%) !important;
}
.my-table > thead > th,
.my-table > thead > td,
.my-table > tbody > th,
.my-table > tbody > td {
  vertical-align: middle !important;
}