为Bootstrap 4表创建border-radius边框
[英]Creating a border with border-radius for Bootstrap 4 tables
问题描述
I am currently working on improving the design of a table in Bootstrap 4. Since it's a Node application, we have chosen to work with handlebars (.hbs). 
我目前正致力于改进Bootstrap 4中表的设计。由于它是Node应用程序，我们选择使用把手（.hbs）。 With CSS I can alter the width of the table, but I haven't managed to create a border or the rounded corners needed to improve the design. 使用CSS我可以改变表的宽度，但我没有设法创建一个边框或改善设计所需的圆角。 I am using CDN from https://cdn.datatables.net/ I am unsure if it is affecting this in any way. 我正在使用来自https://cdn.datatables.net/的 CDN。我不确定它是否以任何方式影响了这一点。
Why isn't it working as expected? 为什么它没有按预期工作？ Do I have to write the CSS a bit differently while using the handlebars, or is it any simpler errors on my behalf? 在使用把手时，我是否必须以不同的方式编写CSS，或者代表我的是否有任何更简单的错误？
I am including a bit of the head. 我包括了一些头脑。 But I am leaving out The CDN for Bootstrap and jQuery: 但我遗漏了CDN for Bootstrap和jQuery：
HBS / (HTML) 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 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;
}
3 个解决方案
解决方案1
4 已采纳 2017-11-03 10:52:50
You need to change border to border-color and add border-style 您需要将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;
}
or combine them into one: 或者将它们组合成一个：
border: 5px solid rgba(0, 128, 255, 0.9) !important;
解决方案2
4 2018-12-07 10:20:11
Here is a simple way to implement a table with rounded corners using Bootstrap 4. Note the wrapper "card" class, this is what gives the table the rounded corners. 下面是使用Bootstrap 4实现带圆角的表的简单方法。注意包装器“card”类，这就是为表提供圆角的原因。 This new class replaces the "panel panel-default" classes that previously allowed for rounded corners in Bootstrap 3. You can override the styling for this class with your own default styling 这个新类替换了以前允许在Bootstrap 3中使用圆角的“面板 - 默认”类。您可以使用自己的默认样式覆盖此类的样式
<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>
解决方案3
1 2019-02-27 19:21:59
I know this question is old but I came across the same problem and found a solution! 我知道这个问题很老但我遇到了同样的问题并找到了解决方案！
The table I was using was the classes: table table-striped table-bordered . 我使用的表是类： table table-striped table-bordered 。 Since I noticed this table had no borders, I added the class bordered so I could work with them. 因为我发现这个表格没有边框，我添加了类bordered ，所以我可以与他们合作。
Still the table only has borders on top so on css: 该表只有顶部的边框，所以在css上：
border-top-right-radius: 15px;
border-top-left-radius: 15px;
Careful when adding this line because it does not accept any attribute like color or style, meaning that border-top-right-radius: 15px solid red ; 添加此行时要小心，因为它不接受任何属性，如颜色或样式，这意味着border-top-right-radius: 15px solid red ; WON'T WORK 不会工作
So for html: 所以对于html：
<table class="table table-striped table-bordered">
and for css: 并为css：
.table-bordered {
border-top-right-radius: 15px;
border-top-left-radius: 15px;
}
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.