我目前正在改进 Bootstrap 4 中表格的设计。由于它是一个 Node 应用程序,我们选择使用 handlebars (.hbs)。使用 CSS 我可以改变表格的宽度,但我还没有设法创建改进设计所需的边框或圆角。我正在使用来自 https://cdn.datatables.net/ 的 CDN 我不确定它是否以任何方式影响了这一点。
为什么它没有按预期工作?在使用车把时,我是否必须以不同的方式编写 CSS,还是代表我有任何更简单的错误?
我包括了一点头部。但我遗漏了 Bootstrap 和 jQuery 的 CDN:
哈佛商学院 / (HTML)
<!-- DataTables CDN -->
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.16/css/dataTables.bootstrap4.min.css"/>
<script src="https://cdn.datatables.net/1.10.16/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/1.10.16/js/dataTables.bootstrap4.min.js"></script>
<!-- Fonts -->
<link href="https://fonts.googleapis.com/css?family=Abril+Fatface" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Karla" rel="stylesheet">
<!-- JS -->
<script src="../public/javascripts/dataTables.js"></script>
<title>Continuous integration Test Results</title>
</head>
<body id="resultsPage" onload>
<header>
</header>
<main>
<div class="container-fluid">
<div id="resultsTable">
<div class="table-responsive">
<table class="table table-striped table-sm table-bordered">
<thead id="semiBlackHead">
<tr>
<th class="col-md-5ths col-xs-6">Project</th>
<th class="col-md-5ths col-xs-6">Last push</th>
<th class="col-md-2ths col-xs-6">Bugs</th>
<th class="col-md-2ths col-xs-6">Style errors</th>
<th class="col-md-5ths col-xs-6">Details</th>
</tr>
</thead>
<tbody id="bleachedBody">
{{{insertRow}}}
</tbody>
</table>
</div>
</div>
</div>
</main>
CSS
#semiBlackHead {
background: rgba(0, 0, 0, 0.8) !important;
}
#bleachedBody {
background-color: rgba(255, 255, 255, 0.9);
background-size: cover;
text-align: center;
background-blend-mode: soft-light;
}
#resultsTable {
border-radius: 25px !important; /* not working */
border-width: 5px !important; /* not working */
border: rgba(0, 128, 255, 0.9) !important; /* not working */
width: 90%; /*Tested and working as expected: */
padding-top: 1%;
margin: 0px auto;
float: none;
}
}
table.dataTable thead .sorting:before, table.dataTable thead .sorting:after, table.dataTable thead .sorting_asc:before, table.dataTable thead .sorting_asc:after, table.dataTable thead .sorting_desc:before, table.dataTable thead .sorting_desc:after {
padding: 5px;
}
.dataTables_wrapper .mdb-select {
border: none;
}
.dataTables_wrapper .mdb-select.form-control {
padding-top: 0;
margin-top: -1rem;
margin-left: 0.7rem;
margin-right: 0.7rem;
}
.dataTables_length label {
display: flex;
justify-content: left;
}
.dataTables_filter label {
margin-bottom: 0;
}
.dataTables_filter label input.form-control {
margin-top: -0.6rem;
padding-bottom: 0;
}
table.dataTable {
margin-bottom: 3rem !important;
}
div.dataTables_wrapper div.dataTables_info {
padding-top: 0;
}
原文由 josefdev 发布,翻译遵循 CC BY-SA 4.0 许可协议
您需要将
border
更改为border-color
并添加border-style
或将它们合二为一: