Menu
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). 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. I am using CDN from https://cdn.datatables.net/ I am unsure if it is affecting this in any way.
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?
I am including a bit of the head. But I am leaving out The CDN for Bootstrap and jQuery:
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;
}
361
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. 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.
<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>
You need to change border to border-color and add 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;
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
