I have a table with a first and a last row with background-color which I would like to have a space with their previous rows.
This is my code:
table {
border-collapse: collapse;
}
thead > tr > th {
font-size: 14px;
color: blue;
height: 44px;
vertical-align: middle;
text-align: left;
padding: 0 10px;
text-align: center;
border: none;
border-bottom: 1px solid blue;
position: relative;
}
thead > tr > th:after {
content: "";
position: absolute;
left: 100%;
top: 8px;
bottom: 8px;
width: 1px;
border-left: 1px dashed blue;
}
thead > tr > th:last-child::after {
border-left: none;
}
tbody > tr:first-child, tbody > tr:last-child {
background-color: gray;
}
tbody > tr:first-child > td, tbody > tr:last-child > td {
border-bottom: none;
color: black;
}
tbody > tr > td {
font-size: 12px;
line-height: 14px;
color: gray;
height: 44px;
vertical-align: middle;
padding: 8px 10px;
border: none;
border-bottom: 1px dashed gray;
position: relative;
}
tbody > tr > td:first-child {
color: black;
}
tbody > tr > td::after {
content: "";
position: absolute;
left: 100%;
top: 8px;
bottom: 8px;
width: 1px;
border-left: 1px dashed gray;
}
tbody > tr > td:last-child::after {
border-left: none;
}
<table>
<thead>
<tr>
<th>Column 1</th>
<th>Column 2</th>
<th>Column 3</th>
</tr>
</thead>
<tbody>
<tr>
<td>6546</td>
<td>5654</td>
<td>6454</td>
</tr>
<tr>
<td>6546</td>
<td>5654</td>
<td>6454</td>
</tr>
<tr>
<td>6546</td>
<td>5654</td>
<td>6454</td>
</tr>
<tr>
<td>6546</td>
<td>5654</td>
<td>6454</td>
</tr>
</tbody>
</table>
So I would like to have a white space between the blue border-bottom of the thead and the first gray row. Also between the last gray row and the previous dashed gray border-bottom. How can I do that?
Hope this helps
change border-collapse: collapse; to border-collapse: separate; and add border-spacing 0 border-spacing.Then apply border-top: 4px solid #fff; for tbody > tr:first-child > td, tbody > tr:last-child > td.
table {
border-collapse: separate;
border-spacing: 0px;
}
tbody > tr:first-child > td, tbody > tr:last-child > td {
border-bottom: none;
color: black;
border-top: 4px solid #fff;
}
table {
border-collapse: separate;
border-spacing: 0px;/* horizontal <length> | vertical <length> */
}
thead > tr > th {
font-size: 14px;
color: blue;
height: 44px;
vertical-align: middle;
text-align: left;
padding: 0 10px;
text-align: center;
border: none;
border-bottom: 1px solid blue;
position: relative;
}
thead > tr > th:after {
content: "";
position: absolute;
left: 100%;
top: 8px;
bottom: 8px;
width: 1px;
border-left: 1px dashed blue;
}
thead > tr > th:last-child::after {
border-left: none;
}
tbody > tr:first-child, tbody > tr:last-child {
background-color: gray;
}
tbody > tr:first-child > td, tbody > tr:last-child > td {
border-bottom: none;
color: black;
border-top: 4px solid #fff;
}
tbody > tr > td {
font-size: 12px;
line-height: 14px;
color: gray;
height: 44px;
vertical-align: middle;
padding: 8px 10px;
border: none;
border-bottom: 1px dashed gray;
position: relative;
}
tbody > tr > td:first-child {
color: black;
}
tbody > tr > td::after {
content: "";
position: absolute;
left: 100%;
top: 8px;
bottom: 8px;
width: 1px;
border-left: 1px dashed gray;
}
tbody > tr > td:last-child::after {
border-left: none;
}
<table>
<thead>
<tr>
<th>Column 1</th>
<th>Column 2</th>
<th>Column 3</th>
</tr>
</thead>
<tbody>
<tr>
<td>6546</td>
<td>5654</td>
<td>6454</td>
</tr>
<tr>
<td>6546</td>
<td>5654</td>
<td>6454</td>
</tr>
<tr>
<td>6546</td>
<td>5654</td>
<td>6454</td>
</tr>
<tr>
<td>6546</td>
<td>5654</td>
<td>6454</td>
</tr>
</tbody>
</table>
Refer this link Spacing between thead and tbody
tbody:before {
content: "-";
display: block;
line-height: 1em;
color: transparent;
}
Related
i don't understand why border of first tbody tr's td is not visible.
i think there is no reason border is not visible.
what i fugure out is this.
if natural height of th is higher than height i fixed for th, first tbody tr's td is visible.
if there is no code th{height: xxpx; }, first tbody tr's td is visible.
.table {
border-spacing: 0;
border-collapse: collapse;
}
.table.summary-style
{
font-size: 11px;
width: 100%;
table-layout: fixed;
text-align: center;
color: #666;
border-bottom: 1px solid #666;
background: #fff;
}
.table.summary-style caption
{
font-size: 0;
line-height: 0;
display: none;
overflow: hidden;
clip: rect(1px 1px 1px 1px);
/* IE6, IE7 */
clip: rect(1px, 1px, 1px, 1px);
width: 0;
height: 0;
margin: 0;
padding: 0;
opacity: 0;
}
.table.summary-style thead th
{
font-size: 16px;
line-height: 1;
position: relative;
box-sizing: border-box;
height: 38px;
padding: 5px 4px;
text-align: center;
vertical-align: middle;
color: #666;
background: #ddd;
}
.table.summary-style > tbody > tr > td
{
font-size: 13px;
line-height: 1.38;
box-sizing: border-box;
height: 36px;
padding: 4px 10px;
text-align: left;
vertical-align: middle;
color: #666;
border-top: 1px solid #666;
background: #fff;
}
<table class="table summary-style">
<thead>
<tr>
<th scope="col">title</th>
<th scope="col">title</th>
<th scope="col">title</th>
</tr>
</thead>
<tbody>
<tr>
<td colspan="3">No Data.</td>
</tr>
<tr>
<td>content</td>
<td>content</td>
<td>content</td>
</tr>
<tr>
<td>content</td>
<td>content</td>
<td>content</td>
</tr>
<tr>
<td>content</td>
<td>content</td>
<td>content</td>
</tr>
</tbody>
</table>
This is happening because position: relative; on .table.summary-style thead th causes that row of elements to appear 'above' the borders of other elements. This is despite the fact that box-sizing: border-box; has been used, as the borders of the table elements have been collapsed together. The solution is to either remove position: relative; on the first row or remove border-collapse: collapse; from .table.
.table {
border-spacing: 0;
border-collapse: collapse;
}
.table.summary-style
{
font-size: 11px;
width: 100%;
table-layout: fixed;
text-align: center;
color: #666;
border-bottom: 1px solid #666;
background: #fff;
}
.table.summary-style caption
{
font-size: 0;
line-height: 0;
display: none;
overflow: hidden;
clip: rect(1px 1px 1px 1px);
/* IE6, IE7 */
clip: rect(1px, 1px, 1px, 1px);
width: 0;
height: 0;
margin: 0;
padding: 0;
opacity: 0;
}
.table.summary-style thead th
{
font-size: 16px;
line-height: 1;
box-sizing: border-box;
height: 38px;
padding: 5px 4px;
text-align: center;
vertical-align: middle;
color: #666;
background: #ddd;
}
.table.summary-style > tbody > tr > td
{
font-size: 13px;
line-height: 1.38;
box-sizing: border-box;
height: 36px;
padding: 4px 10px;
text-align: left;
vertical-align: middle;
color: #666;
border-top: 1px solid #666;
background: #fff;
}
<table class="table summary-style">
<thead>
<tr>
<th scope="col">title</th>
<th scope="col">title</th>
<th scope="col">title</th>
</tr>
</thead>
<tbody>
<tr>
<td colspan="3">No Data.</td>
</tr>
<tr>
<td>content</td>
<td>content</td>
<td>content</td>
</tr>
<tr>
<td>content</td>
<td>content</td>
<td>content</td>
</tr>
<tr>
<td>content</td>
<td>content</td>
<td>content</td>
</tr>
</tbody>
</table>
Try:
table,
td,
th {
border-collapse: collapse;
padding: 0.5em 1em;
border: 2px solid black;
}
.table.summary-style {
font-size: 11px;
width: 100%;
table-layout: fixed;
text-align: center;
color: #666;
border-bottom: 1px solid #666;
background: #fff;
}
.table.summary-style caption {
font-size: 0;
line-height: 0;
display: none;
overflow: hidden;
clip: rect(1px 1px 1px 1px);
/* IE6, IE7 */
clip: rect(1px, 1px, 1px, 1px);
width: 0;
height: 0;
margin: 0;
padding: 0;
opacity: 0;
}
.table.summary-style thead th {
font-size: 16px;
line-height: 1;
position: relative;
box-sizing: border-box;
height: 38px;
padding: 5px 4px;
text-align: center;
vertical-align: middle;
color: #666;
background: #ddd;
}
.table.summary-style>tbody>tr>td {
font-size: 13px;
line-height: 1.38;
box-sizing: border-box;
height: 36px;
padding: 4px 10px;
text-align: left;
vertical-align: middle;
color: #666;
border-top: 1px solid #666;
background: #fff;
}
<table class="table summary-style">
<thead>
<tr>
<th scope="col">title</th>
<th scope="col">title</th>
<th scope="col">title</th>
</tr>
</thead>
<tbody>
<tr>
<td colspan="3">No Data.</td>
</tr>
<tr>
<td>content</td>
<td>content</td>
<td>content</td>
</tr>
<tr>
<td>content</td>
<td>content</td>
<td>content</td>
</tr>
<tr>
<td>content</td>
<td>content</td>
<td>content</td>
</tr>
</tbody>
</table>
So I'm building a web shop cart (using Bootstrap 4.1) and I have to make a list of items in the cart with quantity, the price and total-price... I've decided to use a table for this and ran into an following problem:
I'm trying to make a table that has to look like this:
and my best attempt gave me a table that looks like this..:
My question to you fellow internet strangers is how do I make the table borders surounding the "quantity" to look like in the first picture???
and how do I merge the last cells to get the total price (23,97 €) alighned in the middle of the table like in the first picture??
P.S. Is using a table even a corect choice or should I have used a different element like an or ?
Thanks in advance fellow spacemans :)
My Code:
HTML:
<div class="table-responsive">
<table class="table">
<thead>
<tr>
<th scope="col"> </th>
<th scope="col">Product</th>
<th scope="col">Quantity</th>
<th scope="col">Price</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">#</th>
<td>100 % Mango</td>
<td>1 X</td>
<td>12.99 €</td>
</tr>
<tr>
<th scope="row">#</th>
<td>Vanilla</td>
<td>2 x</td>
<td>10.98 €</td>
</tr>
</tbody>
</table>
</div>
SCSS:
.table {
border-right: 1px solid #000000;
background-color: transparent;
color: #000000;
text-align: center;
thead {
font-family: 'Alegreya', serif;
border: none;
th {
border: none;
}
}
tbody {
font-weight: 700;
text-transform: uppercase;
border: none;
font-size: 1.5rem;
th, td {
border: none;
&:nth-child(3) {
border-right: 2px solid #000000;
border-left: 2px solid #000000;
}
}
}
}
You can achieve that using :after as described below, and using normal border-right for the forth row.
with :after
td{
position:relative; //positioning the td so that the :after would use it for absolute positioning
//for the small borders on 2nd and 3rd columns
&:nth-child(2):after,&:nth-child(3):after{
content:'';
width:2px;
height:20px;
background:#000;
display:block;
position:absolute;
top:50%;
right:0;
transform:translateY(-50%); //moving the element back up by half its height to center it vertically
}
//for the big border on the 4th column
&:nth-child(4){
border-right:2px solid #000; //do that for the th aswell
}
}
Full Code:
.table {
border-right: 1px solid #000000;
background-color: transparent;
color: #000000;
text-align: center;
thead {
font-family: 'Alegreya', serif;
border: none;
th {
border: none;
&:nth-child(4){
border-right:2px solid #000;
}
}
}
tbody {
font-weight: 700;
text-transform: uppercase;
border: none;
font-size: 1.5rem;
td{
position:relative;
&:nth-child(2):after,&:nth-child(3):after{
content:'';
width:2px;
height:20px;
background:#000;
display:block;
position:absolute;
top:50%;
right:0;
transform:translateY(-50%);
}
&:nth-child(4){
border-right:2px solid #000;
}
}
th, td {
border: none;
}
}
}
Here us working one:https://jsfiddle.net/b2f03y1p/17/
Instead this code:
&:nth-child(3) {
border-right: 2px solid #000000;
border-left: 2px solid #000000;
}
Use this code:
td:nth-child(2):after,td:nth-child(3):after{
content: '';
height: 21px;
width: 2px;
background-color: black;
position: absolute;
top: 35%;
left: 90%;
}
td:nth-child(4):after{
content: '';
height: 100%;
width: 2px;
background-color: black;
position: absolute;
left: 90%;
}
Changes to my table info on my CSS sheet doesn't seem to be changing when I run run the application. The CSS is mostly pre-generated from when I created the MVC. I just want tables to have borders so I added the "border: solid 2px black" portion. However it doesn't seem to be adding the border. What am I doing wrong here? CSS:
table {
margin-top: 0.75em;
border: solid 2px black;
}
th {
font-size: 1.2em;
text-align: left;
padding-left: 0;
}
th a {
display: block;
position: relative;
}
th a:link,
th a:visited,
th a:active,
th a:hover {
color: #333;
font-weight: 600;
text-decoration: none;
padding: 0;
}
th a:hover {
color: #000;
}
th.asc a,
th.desc a {
margin-right: .75em;
}
th.asc a:after,
th.desc a:after {
display: block;
position: absolute;
right: 0em;
top: 0;
font-size: 0.75em;
}
th.asc a:after {
content: '▲';
}
th.desc a:after {
content: '▼';
}
td {
padding: 0.25em 2em 0.25em 0em;
border: 0 none;
}
tr.pager td {
padding: 0 0.25em 0 0;
}
<table>
<tr>
<th>
Project ID
</th>
<th>
Test1
</th>
<th>
Test2
</th>
<th>
Test3
</th>
<th>
Test4
</th>
<th>
Test5
</th>
</tr>
</table>
I run your code and table has border!
Maybe there is another css code which Violates your style, so use !important
border: solid 2px black !important;
if you want to border every cell use this code
table, th, td {
border: 1px solid black;
border-collapse: collapse;}
I found the problem, and it's pretty stupid. I needed to refresh the cache (Ctrl + F5). It resulted in the changed CSS.
For some reason these 2 tables won't center, I tried the bootstrap container class, tried margin 0 auto. But they won't center smack in the middle, any idea?
I want both tables centered and displayed horizontally in the middle side by side.
It's on codepen over here:
enter link description here
http://codepen.io/Satearn/pen/ybvXLR
.z
{position :absolute ;
top:50%;
left:50%;
transform :translate(-50%,-50%) ;}
To centre align them just remove width: 100%; from your following CSS code.
.table-fill {
background: white;
border-radius:3px;
border-collapse: collapse;
height: 320px;
margin: auto;
max-width: 300px;
padding:5px;
width: 100%;
box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1);
animation: float 5s infinite;
}
Like this? I used Bootstrap. And I reduced the data inside the table for simplicity
html {
background-color: #3e94ec;
}
/*** Table Styles **/
.table-fill {
border-radius: 3px;
border-collapse: collapse;
padding: 5px;
}
th {
color: #D5DDE5;
background: #1b1e24;
border-bottom: 4px solid #9ea7af;
border-right: 1px solid #343a45;
font-size: 23px;
font-weight: 100;
padding: 24px;
text-align: left;
text-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
vertical-align: middle;
}
th:first-child {
border-top-left-radius: 3px;
}
th:last-child {
border-top-right-radius: 3px;
border-right: none;
}
tr {
border-top: 1px solid #C1C3D1;
border-bottom-: 1px solid #C1C3D1;
color: #666B85;
font-size: 16px;
font-weight: normal;
text-shadow: 0 1px 1px rgba(256, 256, 256, 0.1);
}
tr:hover td {
background: #4E5066;
color: #FFFFFF;
border-top: 1px solid #22262e;
border-bottom: 1px solid #22262e;
}
tr:first-child {
border-top: none;
}
tr:last-child {
border-bottom: none;
}
tr:nth-child(odd) td {
background: #EBEBEB;
}
tr:nth-child(odd):hover td {
background: #4E5066;
}
tr:last-child td:first-child {
border-bottom-left-radius: 3px;
}
tr:last-child td:last-child {
border-bottom-right-radius: 3px;
}
td {
background: #FFFFFF;
padding: 20px;
text-align: left;
vertical-align: middle;
font-weight: 300;
font-size: 18px;
text-shadow: -1px -1px 1px rgba(0, 0, 0, 0.1);
border-right: 1px solid #C1C3D1;
}
td:last-child {
border-right: 0px;
}
th.text-left {
text-align: left;
}
th.text-center {
text-align: center;
}
th.text-right {
text-align: right;
}
td.text-left {
text-align: left;
}
td.text-center {
text-align: center;
}
td.text-right {
text-align: right;
}
.middlepage {
margin: 0 auto;
}
#outer-cont {
text-align: center;
}
#target-element-to-center {
display: inline-block;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container-fluid">
<div class="row">
<table class="table-fill col-xs-6" id="a">
<thead>
<tr>
<th class="text-center" colspan="2">Month</th>
</tr>
</thead>
<tbody class="table-hover">
<tr>
<td class="text-left">January</td>
<td class="text-left">$ 50,000.00</td>
</tr>
</tbody>
</table>
<table class="table-fill col-xs-6" id="a">
<thead>
<tr>
<th class="text-center" colspan="2">Strategies</th>
</tr>
</thead>
<tbody class="table-hover">
<tr>
<td class="text-left">January</td>
<td class="text-left">$ 50,000.00</td>
</tr>
</tbody>
</table>
</div>
</div>
Bootstrap 3 has dropped rounded corners on tables. Which styles should I apply to get them back when I apply the .table-bordered class, please?
UPDATE
So far I've come to this code, with no effect.
CSS taken from Bootstrap 2.3.2:
.table-bordered
{
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
}
.table-bordered thead:first-child tr:first-child > th:first-child, .table-bordered tbody:first-child tr:first-child > td:first-child, .table-bordered tbody:first-child tr:first-child > th:first-child
{
-webkit-border-top-left-radius: 4px;
border-top-left-radius: 4px;
-moz-border-radius-topleft: 4px;
}
.table-bordered thead:last-child tr:last-child > th:first-child, .table-bordered tbody:last-child tr:last-child > td:first-child, .table-bordered tbody:last-child tr:last-child > th:first-child, .table-bordered tfoot:last-child tr:last-child > td:first-child, .table-bordered tfoot:last-child tr:last-child > th:first-child
{
-webkit-border-bottom-left-radius: 4px;
border-bottom-left-radius: 4px;
-moz-border-radius-bottomleft: 4px;
}
HTML code:
<table class="table table-hover table-responsive table-bordered">
<thead>
<tr>
<th style="width: 50%">
Config. Name
</th>
<th>
API Calls
</th>
<th>
Current Amount
</th>
<th>
Actions
</th>
</tr>
</thead>
<tbody>
<tr>
<td>
Agennda
</td>
<td>
2,876
</td>
<td>
$ 80.67
</td>
<td>
Edit
</td>
</tr>
</tbody>
</table>
If you surround the table with a panel you get your rounded corners.
Like this:
<div class="panel panel-default">
<table class="table table-bordered">
....
</table>
</div>
"table-responsive" goes on a div that wraps the table, not on the table itself.
In normalize.less there is the table reset which include border-collapse:collapse. This was not in the 2.x of Bootstrap. Because of this new reset, there are no rounded corners as those have to be border-collapse:separate. You have to make a separate class and set it up accordingly.
<table class="table table-curved">
Only works with "table-hover" and "table-striped" NOT table-bordered. The borders are included in this style.
.table-curved {
border-collapse: separate;
}
.table-curved {
border: solid #ccc 1px;
border-radius: 6px;
border-left:0px;
}
.table-curved td, .table-curved th {
border-left: 1px solid #ccc;
border-top: 1px solid #ccc;
}
.table-curved th {
border-top: none;
}
.table-curved th:first-child {
border-radius: 6px 0 0 0;
}
.table-curved th:last-child {
border-radius: 0 6px 0 0;
}
.table-curved th:only-child{
border-radius: 6px 6px 0 0;
}
.table-curved tr:last-child td:first-child {
border-radius: 0 0 0 6px;
}
.table-curved tr:last-child td:last-child {
border-radius: 0 0 6px 0;
}
LESS
// Added Rounded Corner Tables
.table-curved {
border-collapse: separate;
border: solid #table-border-color 1px;
border-radius: #table-radius;
border-left:0px;
td, th {
border-left: 1px solid #table-border-color;
border-top: 1px solid #table-border-color;
}
th {
border-top: none;
}
th:first-child {
border-radius: #table-radius 0 0 0;
}
th:last-child {
border-radius: 0 #table-radius 0 0;
}
th:only-child{
border-radius: #table-radius #table-radius 0 0;
}
tr:last-child td:first-child {
border-radius: 0 0 0 #table-radius;
}
tr:last-child td:last-child {
border-radius: 0 0 #table-radius 0;
}
}
Using Christina's answer and this thread , i came up with this CSS to get the rounded corners in tables with or without THEAD.
.table-curved {
border-collapse: separate;
border: solid #ccc 1px;
border-radius: 6px;
border-left: 0px;
border-top: 0px;
}
.table-curved > thead:first-child > tr:first-child > th {
border-bottom: 0px;
border-top: solid #ccc 1px;
}
.table-curved td, .table-curved th {
border-left: 1px solid #ccc;
border-top: 1px solid #ccc;
}
.table-curved > :first-child > :first-child > :first-child {
border-radius: 6px 0 0 0;
}
.table-curved > :first-child > :first-child > :last-child {
border-radius: 0 6px 0 0;
}
.table-curved > :last-child > :last-child > :first-child {
border-radius: 0 0 0 6px;
}
.table-curved > :last-child > :last-child > :last-child {
border-radius: 0 0 6px 0;
}
I assume you are not using the source less-files. However, in normalize.less, bootstrap 3.0RC is adding:
// ==========================================================================
// Tables
// ==========================================================================
//
// Remove most spacing between table cells.
//
table {
border-collapse: collapse;
border-spacing: 0;
}
This border-collapse thing destroys the rounded borders on tables.
So, by simply override that in your table-bordered you turn on the effect:
.table-bordered
{
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
border-collapse: inherit;
}
I think it may work.
The following one works quite nicely for me:
.table-curved {
border-collapse: separate;
}
.table-curved {
border: solid #ccc 1px;
border-radius: 6px;
}
.table-curved td, .table-curved th {
border-left: 1px solid #ccc;
border-top: 1px solid #ccc;
}
.table-curved tr > *:first-child {
border-left: 0px;
}
.table-curved tr:first-child > * {
border-top: 0px;
}
Though it does not of course work for nested tables.
For the sake of bootstrappiness:
.table-curved {
border-collapse: separate;
border: solid #table-border-color 1px;
border-radius: #border-radius-base;
border-left: 0px;
border-top: 0px;
> thead:first-child > tr:first-child > th {
border-bottom: 0px;
border-top: solid #table-border-color 1px;
}
td, th {
border-left: 1px solid #table-border-color;
border-top: 1px solid #table-border-color;
}
> :first-child > :first-child > :first-child {
border-radius: #border-radius-base 0 0 0;
}
> :first-child > :first-child > :last-child {
border-radius: 0 #border-radius-base 0 0;
}
> :last-child > :last-child > :first-child {
border-radius: 0 0 0 #border-radius-base;
}
> :last-child > :last-child > :last-child {
border-radius: 0 0 #border-radius-base 0;
}
}
This is another solution that may be far simpler than the above ones. This will select the first and last th elements and apply a border to their respective corners. You can then add a radius to the overall table.
.table {
border-radius: 5px;
}
th:first-of-type {
border-top-left-radius: 5px;
}
th:last-of-type {
border-top-right-radius: 5px;
}
If you have only 1 cell in the first row or last row this one will work.
(Added a fix to the code of: Ruben Stolk)
.table-curved {
border-collapse: separate;
border: solid #table-border-color 1px;
border-radius: #border-radius-base;
border-left: 0px;
border-top: 0px;
> thead:first-child > tr:first-child > th {
border-bottom: 0px;
border-top: solid #table-border-color 1px;
}
td, th {
border-left: 1px solid #table-border-color;
border-top: 1px solid #table-border-color;
}
> :first-child > :first-child > :first-child {
border-radius: #border-radius-base 0 0 0;
}
> :first-child > :first-child > :last-child {
border-radius: 0 #border-radius-base 0 0;
}
> :first-child > :first-child > :only-child{
border-radius: #border-radius-base #border-radius-base 0 0;
}
> :last-child > :last-child > :first-child {
border-radius: 0 0 0 #border-radius-base;
}
> :last-child > :last-child > :last-child {
border-radius: 0 0 #border-radius-base 0;
}
> :last-child > :last-child > :only-child{
border-radius: 0 0 #border-radius-base #border-radius-base;
}
}
The answer above on wrapping the table with a panel (<div class="panel panel-default">) seems to work the best.
However, as mentioned in the comments, you do need to remove the top border on the table.
I used this SCSS to do this, so thought I would share:
// remove extra top border on tables wrapped in a panel
.panel {
& > .table-responsive > .table.table-bordered, & > .table.table-bordered {
& > tbody:first-child, & > thead:first-child {
& > tr:first-child {
td, th {
border-top: none;
}
}
}
}
}
Use table-bordered-curved instead table-bordered
.table-bordered-curved {
border-radius: 4px;
border-collapse: separate;
border: solid 1px #ccc;
}
.table-bordered-curved thead tr:last-child th,
.table-bordered-curved thead tr:last-child td {
border-bottom: solid 1px #ccc;
}
.table-bordered-curved thead tr th,
.table-bordered-curved thead tr td {
border-bottom: 0;
border-right: solid 1px #ccc;
}
.table-bordered-curved thead tr th:last-child,
.table-bordered-curved thead tr td:last-child {
border-right: 0;
}
.table-bordered-curved tbody tr:first-child th,
.table-bordered-curved tbody tr:first-child td {
border-top: 0;
}
.table-bordered-curved tbody tr td {
border-right: solid 1px #ccc;
}
.table-bordered-curved tbody tr td:last-child {
border-right: 0;
}
This was the only solution that worked for me in Bootstrap 4. The card class only put a background behind my table.
<table class="table table-dark table-striped">
<thead>
<tr>
<th class="rounded-top" scope="col" colspan="3">Perofrmance</th>
</tr>
</thead>
<thead>
<tr>
<th scope="col">Strategy</th>
<th scope="col">YTD</th>
<th scope="col">Max DD</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">BTCUSD:</th>
<td>
<b>15</b>%
</td>
<td>
<b>20</b>%
</td>
</tr>
<tr style="border-bottom: transparent;">
<th scope="row" style="border-bottom-left-radius: .25rem!important;">ETHUSD:
</th>
<td>
<b>12.6</b>%
</td>
<td style="border-bottom-right-radius: .25rem!important;">
<b id="valueETHDD">0</b>%
</td>
</tr>
</tbody>
</table>