After working on this fiddle with a bootstrap table, I encountered an issue where I was unable to apply the desired border-radius to it. Can someone shed some light on why this is happening and provide guidance on how to successfully implement it?
This is the HTML structure:
<div class="space-created space-created__large">
<div class="table-container">
<table class="table reasonCode-table">
<thead>
<tr class="reasonCode-table__title">
<th class="col-md-1">Code No.</th>
<th class="col-md-3">Error Code</th>
<th class="col-md-8">Error Description</th>
</tr>
</thead>
<tbody>
<tr>
<td class="reasonCode-table__items">1</td>
<td class="reasonCode-table__items">ERR001</td>
<td>
This is a fake error description for the first error code.
</td>
</tr>
<tr>
<td class="reasonCode-table__items">2</td>
<td class="reasonCode-table__items">ERR002</td>
<td>
Here's a fabricated error description for the second error code.
</td>
</tr>
<tr>
<td class="reasonCode-table__items">3</td>
<td class="reasonCode-table__items">ERR003</td>
<td>
This is a made-up error description for the third error code.
</td>
</tr>
<tr>
<td class="reasonCode-table__items">4</td>
<td class="reasonCode-table__items">ERR004</td>
<td>
Here's a fictitious error description for the fourth error code.
</td>
</tr>
<tr>
<td class="reasonCode-table__items">5</td>
<td class="reasonCode-table__items">ERR005</td>
<td>
This is a non-existent error description for the fifth error code.
</td>
</tr>
</tbody>
</table>
</div>
</div>
The SCSS styling applied looks like this:
body{
padding:2rem;
}
.reasonCode-table {
th,
td {
border: 1px solid #7a7878;
padding: 8px;
border-radius: 6px;
&:first-child {
border-top-left-radius: 6px;
}
&:last-child {
border-top-right-radius: 6px;
}
}
th {
text-align: center;
border-top: none;
border-right: none;
border-left: none;
}
&__title {
text-align: center;
}
&__items {
vertical-align: middle;
text-align: center;
}
thead {
th {
border-top: none;
border-right: none;
border-left: none;
}
}
}
.table-container {
border-radius: 6px;
overflow: hidden;
}
I attempted enclosing the table within a new div and defining the border as shown below:
.table-container {
border-radius: 6px;
overflow: hidden;
}
In addition, I tried applying the borders to its child elements with no success:
.reasonCode-table {
th,
td {
border: 1px solid #7a7878;
padding: 8px;
border-radius: 6px;
&:first-child {
border-top-left-radius: 6px;
}
&:last-child {
border-top-right-radius: 6px;
}
}
Unfortunately, these adjustments did not yield the desired outcome. Any suggestions on how to tackle this challenge would be greatly appreciated.