Add border-radius to boostrap table

Question

I have this fiddle where I have a bootstrap table, I want to set border-radius to it, but for some reason, I can not apply them. Can some one explain why I can not, and how to do it?

HTML:

<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>

SCSS:

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;
}

As you can see, I added a new div to wrap the table to apply the border:

.table-container {
  border-radius: 6px;
  overflow: hidden;
}

Also, I tried applying to childs as:

.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;
    }
  }

But it does not work too, how can I achieve this?

Answer 1

When you post a question about CSS, please make a snippet that can be run within your question. I had to go compile your SCSS, find links to bootstrap CDN files, and copy paste all your code just to get it in here. Please make it easier for people to help you.

So what you did was apply a border-radius to the .table-container, which has no border. So yes, the radius is there but you can't see it. See my below example, I just added a border: 1px solid red and now you can see it.

Tables for some reason can't have a border radius applied t them, at least not easily. Honestly the best option here might be to apply it to the .table-container like this, and then remove any outer borders on the table itself.

body {
    padding: 2rem;
}

.reasonCode-table th,
.reasonCode-table td {
    border: 1px solid #7a7878;
    padding: 8px;
    border-radius: 6px;
}

.reasonCode-table th:first-child,
  .reasonCode-table td:first-child {
    border-top-left-radius: 6px;
}

.reasonCode-table th:last-child,
  .reasonCode-table td:last-child {
    border-top-right-radius: 6px;
}

.reasonCode-table th {
    text-align: center;
    border-top: none;
    border-right: none;
    border-left: none;
}

.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;
}

.table-container {
    border-radius: 6px;
    overflow: hidden;
  
  border: 1px solid red;
}

<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.css" rel="stylesheet"/>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.css" rel="stylesheet"/>
<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>