Boostrap datepicker style being overriden by CSS table styling - html

Question

My CSS code for table is overriding the bootstrap datepicker.It doesn't look anything like a calendar. How can i fix this?
I tried using css ":not" which unfortunately did not work.
I do not know what else to try.
I also tried to change them to classes and try which did not work as well.
Is there anyway to ignore the the css file for this element only or make bootstrap css !important?
Please check the demo with running code.
Thanks.
Codepen Demo
CSS Code of the table
/*Table*/
body{
background-color:black;
color:white;
}
table:not(.form-control) {
font-family: "Open Sans", sans-serif;
border: 1px solid salmon;
border-collapse: collapse;
margin: 0;
padding: 0;
width: 100%;
table-layout: fixed;
}
table caption {
font-size: 1.5em;
margin: .5em 0 .75em;
}
table tr:not(.form-control) {
background-color: #0B0C10;
border: 1px solid #0B0C10;
padding: .35em;
}
table th:not(.datepicker),
table td:not(.datepicker) {
padding: .625em;
text-align: center;
}
table th:not(.datepicker-days) {
font-size: .85em;
letter-spacing: .1em;
text-transform: uppercase;
}
#media screen and (max-width: 600px) {
table {
border: 0;
}
table caption {
font-size: 1.3em;
}
table thead {
border: none;
clip: rect(0 0 0 0);
height: 1px;
margin: -1px;
overflow: hidden;
padding: 0;
position: absolute;
width: 1px;
}
table tr {
border-bottom: 3px solid salmon;
display: block;
margin-bottom: .625em;
}
table td {
border-bottom: 1px solid salmon;
display: block;
font-size: .8em;
text-align: right;
}
table td::before {
content: attr(data-label);
float: left;
font-weight: bold;
text-transform: uppercase;
}
table td:last-child {
border-bottom: 0;
}
}
Codepen Demo

Answer 1

Please take a look at this fork of your Codepen demo: https://codepen.io/kshetline/pen/mdbjyQr
You already had a class table-align that was wrapped around your table, so all that was necessary was to prefix the CSS rules which were meant to apply only to your table with .table-align. For example:
.table-align table th,
.table-align table td {
padding: .625em;
text-align: center;
}
.table-align table th {
font-size: .85em;
letter-spacing: .1em;
text-transform: uppercase;
}
And I also deleted all of the :not(.datepicker) stuff.