The parent class failed to implement the border radius as intended

Recently, I created an HTML table using Bootstrap V5 on my website.

.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/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="67050808131413150617275249554954">[email protected]</a>/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>

I have encountered an issue where the table does not have the desired border-radius when displayed. I attempted to add it to the parent element .reasonCode-table and even tried wrapping everything within another <div>, but without success. Can anyone provide insight on how to overcome this challenge?

Thank you.

htmlcssbootstrap-5

Answer №1

To enhance the appearance of your <table> element, consider applying inline styles directly to the tag. Your code could be modified like this:


                                    <!-- Choose your preferred CSS unit -->
<table class="table reasonCode-table" style="border-radius:11.36rem;">
    <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> 
        <!-- Add more content here -->

The radius effect may not be visible due to a specificity issue, but inline styles have the highest specificity level.

Alternatively, you can use the !important keyword at the end of your style declaration before the semicolon ;

For example:

.your__class_name{
  border-radius:1.56rem !important;
  //Include other necessary styles
}

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

What is the best way to ensure my background image adjusts properly for both iPhones and Android devices to be responsive?

I have set the background image in my CSS to fit perfectly without any need for adjustments. The goal is for the image to resize itself when viewed on mobile devices or tablets. .intro { display: table; width: 100%; height: auto; padding: ...

htmlcssiphoneresponsive-design

Styling CSS: Create circular images with dynamic text positioning or resizing on screens larger than 768px

I'm struggling to figure out how to create a circular profile picture on a background image that remains responsive and maintains its position across different screen sizes. Currently, I've been using fixed margin values to adjust the position, ...

cssresponsive-designbootstrap-4

Using PHPMailer in conjunction with a textarea form and HTML

Currently, I am attempting to piece together code from a PHP tutorial that demonstrates how to create a basic PHPMailer form for sending plain text emails to a mailing list. The simplicity of the form is ideal as it will be used by only a few individuals. ...

phphtmlformsemailphpmailer

Navigating the art of employing different fonts for a website

I am looking to incorporate the trainway font into my website, but I'm concerned that the user may not have it installed on their device. Is there a way to showcase text in a specific font without requiring the user to download and install it? Thank ...

javascripthtmlcss

Is it possible to find a program that can extract information from a Hotmail webpage, such as the number of unread messages?

Does anyone know of a script that can be used to extract simple data from the hotmail/live mail web page? It doesn't matter what programming language it's in, but it would be best if it can run on Linux. This is because hotmail doesn't offer ...

htmlscriptingemaillivehotmail

What could be causing PHP to incorrectly display form data?

After learning html and css, I decided to venture into php scripting. My goal is to retrieve input from an HTML form using php code that looks like this: form.html : <html> <body> <form action="action.php" method="POST&q ...

phphtmlforms

The specified font-size in my CSS is being ignored by Chrome

I'm a beginner in the world of html/css and was tasked with creating a html webpage. I set a specific font-size for my webpage, only to be surprised when my browser (Google Chrome) adjusted it on its own. Even though I specified the font-size as 14px, ...

htmlcssgoogle-chromefont-size

Refresh the NodeJS page without resending user data

I am facing an issue with my Node Js local server and multiple identical html pages. Each page contains user input fields that are saved on a text file. The problem arises when users refresh the page, as the data from the previous page is sent and saved ag ...

htmlnode.js

Refreshing a webpage to accurately display changes made in a CRUD application without the need for a hard reset

My to-do app is almost fully functional - I can create items, mark them as completed, and delete them using a delete button. However, there's one issue: when I delete an item, the page doesn't update in real-time. I have to manually refresh the p ...

javascriptpythonhtmlajax

The combination of absolute positioning and percentage-based height measurements allows for

For more information, go to http://jsfiddle.net/A2Qnx/1/ <div id='w'> <div id='p'> <div id='c'> </div> </div> </div> With absolute positioning enabled, div P has a height ...

htmlcssheightcss-position

How can I make the row color of a jQuery datatable change when the row is selected?

One of my challenges involves implementing a jquery dataTable (view here) where each row contains a checkbox. I want the row's color to change when the checkbox is checked. This is the approach I attempted: <table id="tabellaOrdinaFarmaci" class=" ...

javascriptjqueryhtmlcssdatatable

What is stopping TypeScript from assigning certain properties to the HTMLScriptElement?

I'm currently working with TypeScript and React, and I'm facing an issue with a function that is meant to copy script attributes between two elements: type MutableScriptProperties = Pick< HTMLScriptElement, 'async' | 'crossO ...

javascripthtmlreactjstypescriptdom

Elevate the Appearance of Material UI Elements with custom CSS Sty

I am currently facing an issue while trying to customize the styling of a Material UI component using CSS. Here is the code snippet: <IconButton className="my-class"> <Close /> </IconButton> CSS: .my-class { float: right ...

cssreactjstypescriptmaterial-ui

Canvas - Drawing restricted to new tiles when hovered over, not the entire canvas

Imagine having a canvas divided into a 15x10 32-pixel checkerboard grid. This setup looks like: var canvas = document.getElementById('canvas'); var context = canvas.getContext('2d'); var tileSize = 32; var xCoord var yCoord ...

javascriptjqueryhtmlcanvas

Ways to activate auto completion without using a string

Can anyone assist us with the tinymce editor? We have implemented an auto completion feature using a plugin from TinyMCE's documentation, but we are having trouble changing the triggering behavior. Currently, it only suggests options when "@" is typed ...

javascripthtmltypescripttinymcetinymce-5

What could be causing issues with angularjs ng-include not functioning properly in Chrome at times?

<html ng-app="myApp1"> <head> <title>NG-Include</title> <script src="angular.js"></script> <script src="filter.js"></script> </head> <body> <div ng-controller="myController"> ...

htmlangularjsgoogle-chrome

Concatenating strings with JavaScript

I am currently working on building a web page using a combination of html and javascript. I have a json file that provides inputs for some specific content I need to display. My main goal is to set up an address variable in order to show the Google Maps AP ...

javascripthtmljsongoogle-maps

What is the best way to generate a ul-li structure using JSON input and jQuery?

There is a JSON variable present: var links=[{"text":"Home","href":"http://home.com","icon":"fas fa-home","target":"_top","title":"My Home","children":[{"text":"home2","href":"home2.com","icon":"fas fa-chart-bar","target":"_self","title":"home2","category ...

javascriptjqueryhtmljson

What is the reason my bootstrap carousel isn't functioning properly?

My carousel is only displaying the first image and seems to be stuck. The navigation buttons are also not functioning. Here is the code for reference: <main> <div id="slider" class="carousel slide" data-mdb-ride="carousel"> <div cl ...

htmlcssbootstrap-5

The hidden DIV containing an ASP.NET CheckBox consistently yields a value of false

I have a group of form elements located within a hidden div which looks like this: <div id="jDivUpdateFolder" style="display:none;"> <asp:TextBox ID="txtEditFolderName" runat="server"></asp:TextBox><br /> <asp:TextBox ID ...

javascriptasp.netcssvb.netwebforms