Bootstrap 4 datetimepicker inside table incorrect design - html-table

Question

I have a problem with Bootstrap 4 by displaying calendar on input field that is inside a table - the whole design is looking weird and doesn't display correctly. If the input field is outside the table, the design is good.
How it should look:
CSS file is included in BundleConfig.cs
EDIT: This is the CSS styling for tables:
.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;
}
I'm using 'domispicker' in class for input element but the style is still overriden.
The table html looks like this:
<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

Add custom class to your main table and style only direct children of that table using child combinator (also remove your current CSS code). This will prevent from styling tables which are used inside picker.
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;
}