I have this simple HTML table using Bootstrap V5
.reasonCode-table th, .reasonCode-table td {
padding: 8px;
border: 2px solid #7a7878;
border-radius: 6px;
}
.reasonCode-table__title {
text-align: center;
}
.reasonCode-table__items {
vertical-align: middle;
text-align: center;
}
.reasonCode-table thead th {
border-top: none;
border-right: none;
border-left: none;
}
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"/>
<table class="table reasonCode-table">
<tbody>
<tr>
<td class="col-md-1 reasonCode-table__items">F123</td>
<td class="col-md-2 reasonCode-table__items">X987Y</td>
<td class="col-md-9 last-column">
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Phasellus facilisis, urna eget lacinia lacinia, mauris quam
gravida elit.
</td>
</tr>
<tr>
<td class="reasonCode-table__items">G456</td>
<td class="reasonCode-table__items">Z654W</td>
<td class="last-column">
Nullam fringilla consectetur nunc, sit amet tincidunt eros
congue ut.
</td>
</tr>
<tr>
<td class="reasonCode-table__items">H789</td>
<td class="reasonCode-table__items">P123Q</td>
<td class="last-column">
Fusce vel dolor vel odio volutpat laoreet eget eu elit.
</td>
</tr>
<tr>
<td class="reasonCode-table__items">J012</td>
<td class="reasonCode-table__items">L567M</td>
<td class="last-column" colspan="2">
Sed id nunc sit amet lectus feugiat fermentum.
</td>
</tr>
<tr>
<td class="reasonCode-table__items">K345</td>
<td class="reasonCode-table__items">H789K</td>
<td class="last-column">
Mauris hendrerit bibendum mi, in tincidunt nisi dapibus at.
</td>
</tr>
</tbody>
</table>
If you try to run this snippet you noticed that the table has no border-radius for some reason.
I tried adding to the parent .reasonCode-table
. Also, I tried wrapping everything in a new <div>
, but it does not work; how can I achieve this?
Regards
2
Answers
Try adding inline style to the
<table>
tag so your code should look likeI think that the radius is not applied because of specifity issue but inline style have highest specifity
or you can try adding
!important
at the end of your style rule before semicolon;
e.g.
Include the
border-collapse: ... ;
CSS property on the table itselfThe border-collapse CSS property sets whether cells inside a have shared or separate borders.
You can also use this if you want the border-radius to apply to only the table itself and not the individual cells:
Source: https://developer.mozilla.org/en-US/docs/Web/CSS/border-collapse
Source: https://unused-css.com/blog/css-rounded-table-corners/