jos*_*dev 3 html css handlebars.js bootstrap-4
我目前正在改进Bootstrap 4中表的设计。由于它是Node应用程序，因此我们选择使用把手（.hbs）。使用CSS可以更改表格的宽度，但是我无法创建边框或圆角来改善设计。我正在使用来自https://cdn.datatables.net/的 CDN， 我不确定它是否以任何方式影响到此。
为什么它没有按预期工作？使用车把时是否必须编写CSS有所不同，还是代表我一些更简单的错误？
我有点头。但是我将Bootstrap和jQuery的CDN省略了：
HBS /（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;
}
您需要更改border为border-color并添加border-style
#resultsTable {
border-radius: 25px !important;
border-width: 5px !important;
border-style: solid !important;
border-color: rgba(0, 128, 255, 0.9) !important;
width: 90%; /*Tested and working as expected: */
padding-top: 1%;
margin: 0px auto;
float: none;
}
或将它们合二为一：
border: 5px solid rgba(0, 128, 255, 0.9) !important;
这是使用Bootstrap 4实现带有圆角的表的一种简单方法。请注意包装器“ card”类，这是为表提供圆角的原因。这个新类替代了以前在Bootstrap 3中允许圆角的“ panel panel-default”类。您可以使用自己的默认样式覆盖该类的样式。
<div class="card">
<div class="table-responsive">
<table class="table table-bordered table-striped">
<thead>
<tr>
<th scope="col">#</th>
<th scope="col">First</th>
<th scope="col">Last</th>
<th scope="col">Handle</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>Mark</td>
<td>Otto</td>
<td>@mdo</td>
</tr>
</tbody>
</table>
</div>
</div>