Implement rounded corners to bootstrap table

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.

Answer №1

If you have a question related to CSS, it would be really helpful if you include a snippet that others can easily run and test. It took me some time to put together your SCSS code, find the necessary bootstrap CDN links, and transfer everything here. Making things simpler for those trying to assist you will save time and make the process smoother.

Regarding the issue with applying a border-radius to the .table-container element which does not have borders, thus making the radius invisible, I made a quick adjustment in my example below by adding a border: 1px solid red so now the border radius is visible.

Tables seem to have limitations when it comes to applying border radius directly to them. In this case, it might be more effective to assign the radius to the .table-container element and eliminate 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>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Enhancing CSS to create a more visually appealing loading spinner

I am completely new to CSS and I've been attempting to customize the CSS in the angular-loading-bar module to create a more visually appealing loading spinner. Currently, I have a square spinner that rotates in the center of the page, with a black bor ...

What is more effective: utilizing document fragments or string concatenation for adding HTML to the DOM?

My task involves adding a collection of cards to the DOM. html <div class="card"> <div class="card-title">Card 1</div> <div class="card-subtext">This is card 1</div> </div> js let ...

I am having difficulty with my ajax code and I am unsure of how to resolve it

Here is the code snippet. I am encountering an issue where pressing the button does not trigger any action, while I simply want to ensure that the AJAX functionality is working properly. The expected behavior is for an alert message to be displayed when th ...

Position the input element in the middle of the div

Is it possible to center a form input element within a div element without it changing position when the browser window size is adjusted? I attempted using margin: auto and position: relative, but encountered issues with the element moving. How can this be ...

Steps to create a pop-up displaying a unique message ID retrieved from my database

My goal is to implement a pop-up message dialog on my website. When a user clicks on a reply icon, a pop-up message will appear with a textarea for the user to respond to a question they have been asked. The current issue is that clicking on the tag alway ...

Aligning a label in the center of a horizontal layout's vertical axis

Struggling with centering a QLabel vertically in a QHBoxLayout. Here's the relevant part of my code: QFrame* topBar = new QFrame(); topBar->setStyleSheet("background-color: #2c3d50;border-bottom: 3px solid #2c92b6;"); topBar->setSizePolicy(QSiz ...

Is there a way to send the element as an argument within the inner function?

I need to pass the selector as a parameter through the Slider to an Object nested function. I anticipated that istouchEnd would receive the .storage1 as a parameter from the Slider, but unfortunately, this.storage never gets the parameter from the Slider ...

Optimal method for arranging Vue components

When deciding where to position a child element, should it be done within its own CSS scope or from the parent? In the scenario provided below, would it be more effective to use margin-left: auto; on the parent element or the child element (both options a ...

Contact Form featuring a Text Area to complete the rest of the details

I am currently working on creating a contact form that has a design similar to the one shown below. However, I am facing challenges in getting the desired layout. I initially tried using flex-box but encountered issues with displaying the Text Area correct ...

CSS - Ignoring Padding Causes Unexpected White Space to Appear

I am encountering a simple error, and the following address will direct you to where the issue can be seen. Why is certain parts of the header appearing white instead of the light shade of green it is set to be? It should be positioned right at the top un ...

A versatile jQuery function for extracting values from a :input selector

Is there a universal method in jQuery to retrieve the value of any :input element? I pose this question because I have a webpage containing select and checkbox inputs, as seen in the code below: for (var i = 0; i < arguments.length; i++) { ...

Encountering redundant links during the scraping process

I'm currently working on extracting "a" tags with the class name "featured" from a specific website . Although the code I've written seems to be error-free, it unfortunately duplicates the links. How can I resolve this issue and avoid the duplica ...

Navigating with the keys is disabled until an item is chosen

Currently working on a Shopify website for a client and encountered an issue where the keys don't scroll down upon page load unless a specific element is clicked or tab is used. I am not sure what caused this unexpected behavior, it may have occurred ...

Fill in a URL using the information provided in the boxes and navigate to the website

My colleagues and I access the following link multiple times a day, clicking through several pages to reach this specific URL: http://eharita.mamak.bel.tr/imararsiv/test.aspx?f_ada=36391&f_parsel=4 I am looking to create an HTML page with two input b ...

What is the best way to merge multiple attributes into a single attribute in HTML?

Is there a way to set a margin for a section of my site without it treating each attribute individually? I want to treat them as one attribute instead. Here's an example: <div style="background-color: grey; padding: 13px;"> <h1>This p ...

Adding DIV classes and IDs to my stylesheet

This is the code that I added to my Stylesheet: .friend { border:4px dashed 008000; } .enemy { border:2px dashed 008000; } .family { border:2px dashed 008000; } #archnemesis { border:4px solid 008000; } * { border:4px ...

Verifying that dynamically generated textboxes contain values

I am facing an issue with my code where I am generating dynamic IDs like checc1, checc2 for dynamically created textboxes. How can I assign these values to a variable called 'boxc' one by one? function GetDynamicTextBox(value) { var nextRowID ...

Utilizing the Download Attribute in HTML 5 with iPhone Devices

Is there a way to download and view files such as PDFs, Word docs, and JPGs on an Ionic progressive web app without leaving the current page? I've tried using the html5-Download attribute on Android, but it doesn't work properly on iPhone. Any su ...

Issues with toggling the menu on Angular 14 using Bootstrap 4.6

I am struggling with implementing a menu on the header section of my Angular 14 homepage. The menu I added is not opening as expected. Even after trying various working menu samples from the internet, I couldn't get it to work in my project. Here are ...

Error in height calculation due to setting the CSS property line-height

I am facing a challenge in setting the height of a parent ul element based on the included li's. The issue arises when the CSS property line-height contains fractional digits, causing inaccuracies in the calculation. This results in the calculated hei ...