html - Boostrap 日期选择器样式被 CSS 表格样式覆盖
问题描述
我的表格 CSS 代码覆盖了引导日期选择器。它看起来不像日历。我怎样才能解决这个问题?
我尝试使用 css ":not" 不幸的是没有用。我不知道还能尝试什么。我还尝试将它们更改为类并尝试哪个也不起作用。
有没有办法只忽略这个元素的css文件或者让bootstrap css!important?
请使用运行代码检查演示。谢谢。
表格的 CSS 代码
/*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 演示的这个分支:https ://codepen.io/kshetline/pen/mdbjyQr
你已经有一个table-align
包裹在你的桌子周围的类,所以所有必要的就是在 CSS 规则前面加上.table-align
. 例如:
.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;
}
我还删除了所有的:not(.datepicker)
东西。
推荐阅读
- python - 如何发送响应烧瓶 api 并运行 python 脚本的图像?
- bash - 使用 while 条件 ping 主机的 Bash 脚本
- swift - 在@State chage 之后,SwiftUI 在 for 循环中重新渲染代码
- javascript - 我可以使用 array.filter() 从数组中获取样本元素吗?
- c++ - 如何使用 C++ 元编程在编译时包装和重载所有成员函数(来自未知类)?
- java - Java中if语句中的for循环
- javascript - 如何防止用户使用 JavaScript 复制他的 IP?
- swiftui - SwiftUI - 在当前视图中为新图像设置动画
- java - 读取文本文件或向 ArrayList 添加元素是否更快?
- math - Tetromino(一种俄罗斯方块)策略,完成一个区域的概率