Build a bootstrap table with rounded corners

Currently, I am utilizing Bootstrap 5 and have the table code below:

.reasonCode-table {
  padding: 8px;
  border-collapse: separate;
}

.reasonCode-table th {
  border: 2px solid #7a7878;
  padding: 8px;
  border-radius: 2px;
  border-collapse: collapse;
}

.reasonCode-table td {
  border: 2px solid #7a7878;
  padding: 8px;
  border-radius: 0.375rem;
   border-collapse: collapse;
}

.reasonCode-table__title {
  text-align: center;
}

.reasonCode-table__items {
  vertical-align: middle;
  text-align: center;
}

.reasonCode-table__last-column {
  background-color: #f1f1f1;
}
<link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="85e7eaeaf1f6f1f7e4f5c5b0abb7abb6">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet"/>
<table class="reasonCode-table rounded rounded-3 overflow-hidden">
  <tbody>
    <tr>
      <td class="col-md-1 reasonCode-table__items">101</td>
      <td class="col-md-2 reasonCode-table__items">X764A</td>
      <td class="col-md-9 reasonCode-table__last-column">
        Claim submitted with incomplete patient information.
      </td>
    </tr>
    <tr>
      <td class="reasonCode-table__items">202</td>
      <td class="reasonCode-table__items">H225B</td>
      <td class="reasonCode-table__last-column">
        The provided diagnosis code is invalid or not recognized.
      </td>
    </tr>
    <tr>
      <td class="reasonCode-table__items">303</td>
      <td class="reasonCode-table__items">C879G</td>
      <td class="reasonCode-table__last-column">
        Procedure code billed is not covered under the patient's insurance plan.
      </td>
    </tr>
    <tr>
      <td class="reasonCode-table__items">404</td>
      <td class="reasonCode-table__items">F512T</td>
      <td class="reasonCode-table__last-column">
        The claim contains duplicate service entries.
      </td>
    </tr>
    <tr>
      <td class="reasonCode-table__items">505</td>
      <td class="reasonCode-table__items">Z989P</td>
      <td class="reasonCode-table__last-column">
        Billing provider is not authorized to perform the billed services.
      </td>
    </tr>
  </tbody>
</table>

My goal is to create a standard table with a border-radius of 6px. However, when attempting to do so, the borders are not applying correctly when using border-collapse: collapse. Initially, I attempted setting border-collapse: separate and then applying collapse specifically to td and th elements, but the separators persisted. How can I achieve a simple table with border-radius while keeping collapsible borders?

Example of desired outcome:

https://i.sstatic.net/mKGPx.png

htmlcssbootstrap-5

Answer №1

To achieve the desired result, simply apply the CSS property border-collapse: none; to the .reasonCode-table element. I have tested this solution and it works perfectly.

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

Preventing undesired form submissions in HTML and JavaScript

My question might be simple, but it's what I have in mind. When working with two buttons in HTML - one for form submission and the other to trigger a JavaScript event - both buttons end up submitting the form. How can I make sure the second button onl ...

javascriptjqueryhtmlforms

Can Webpack be used to produce only CSS files without generating the output.js file?

I've integrated Webpack into my project alongside the extract-text-webpack-plugin. Within my project, I have various build scripts. One of these scripts focuses solely on bundling and minifying CSS. While utilizing Webpack for other tasks, I decided ...

cssnode.jsnpmbundling-and-minificationwebpack

Ways to obtain data in JavaScript function from HTML

Struggling to pass the key from a database query in HTML using PHP to a JavaScript function? You're not alone. The challenge lies in passing the field_id to the updateRecords() JS function through the onClick() event of an HTML button. Previously, se ...

javascriptphphtmlajax

What should I name my Bootstrap Modal ID to ensure AdBlock Plus blocks it?

What specific ID should I use to block my Bootstrap Modal with AdBlock Plus? I want AdBlock Plus to block it for users who have it installed and are using it. I don't want to be overly intrusive by trying to circumvent ABP. The only reason I am using ...

jqueryhtmlcsstwitter-bootstrapadblock

Modify PHP script to extract the Document Object Model (DOM) from a specified URL

Hey there, I'm currently using this code to extract and display the HREFs of all "A" tags from a URL. However, my output includes the entire link when I only want the name portion after http://twitter.com/namehere So, I'm looking to clean up my ...

phphtml

Automatic line breaks in MathJax when displayed in a modal dialogue box

As part of a math project, I need to display the solution of a problem in a Sweetalert2 modal. However, despite using the following code: <script type="text/x-mathjax-config"> MathJax.Hub.Config({ tex2jax: { inlineMath: [['$','$ ...

javascripthtmlcssmathjaxsweetalert2

Establish restrictions for the minimum and maximum values for each year in the Date Range Picker

After searching for answers to my question, I have found some general solutions but none that fit my specific problem. I created a backend system for users to manage the availability of hotel rooms throughout the selected year. Using HTML/PHP/MySQL, I dis ...

phpjqueryhtmldaterangepicker

Python script for extracting content from web pages that are loaded dynamically

I am facing an issue with extracting content from a webpage on my website. Despite trying to use selenium and clicking buttons, I have not been successful. #!/usr/bin/env python from contextlib import closing from selenium.webdriver import Firefox import ...

javascriptjquerypythonhtmlselenium

Setting the height of a div to 100% is not effective

I've designed a two-column layout. You can view the code on jsfiddle.net. My problem is that I want the center line with a width of 10px to have a height of 100%. I have a container div with the ID #obal (set to height: auto). When I set the height of ...

htmlcss

Interact with elements using Selenium with dynamic target IDs and AJAX

Currently, I am utilizing selenium for automating various IT administrative tasks. One specific task involves swapping out external drives on a NAS system accessed through an internal webpage. The web interface of the NAS appears to utilize AJAX, which dyn ...

htmlajaxselenium

Generate a variety of HTML ordered lists

Can anyone assist me in determining the type of ordered list shown below? What is the method to achieve an ordered list like this: (a) (b) (c) in HTML? ...

htmlcss

Angular 2 component hierarchy with parent and child components

Currently, I am in the process of learning typescript and angular2. My attempt to incorporate parent and child components into my fiddle has not been successful. Despite conducting some research, I have encountered an error that states: Uncaught ReferenceE ...

htmlangulartypescript

Problem with fetching Grails

I have a table nested within an anchor tag. The table is centered on the page, with each row containing an image. When the page loads, I noticed the following: a) The table initially appears at the top-left corner of the screen. b) As there are multiple v ...

javascripthtmlcssgrails

Toggling Bootstrap Tooltip divs within a nested structure triggers the Tooltip of the parent div

I have a setup with 2 nested <div> elements, both utilizing the tooltip() function. When I hover over the inner <div>, the tooltip of the outer <div> also displays. To resolve this issue, I attempted to clear the title of the inner <di ...

csstwitter-bootstraptooltip

Basic JavaScript framework centered around the Document Object Model (DOM) with a module structure similar to jQuery. Currently facing challenges with

In order to create a simple framework with jQuery style, I have written the following code: (function(window) { window.smp=function smpSelector(selector) { return new smpObj(selector); } function smpObj(selector) { this.length = 0; if (!s ...

javascriptjqueryhtmlcssframeworks

What are the best practices for utilizing *ngIf?

In my Angular project, I am facing a challenge with using *ngIf. My app.component.html file handles both the login page and the dashboard. I want to hide the dashboard until the user logs in. To achieve this, I decided to use *ngIf. Here is how I implement ...

javascripthtmlangulartypescript

Web page experiencing "increased magnification during loading"

I've been experiencing an issue with my mobile site where the page loads as if it's zoomed in every time. I can easily scale it on a touch phone to make it look right, but I'm looking for ideas on how to prevent this from happening altogethe ...

javascriptandroidhtmlmobile

There seems to be a glitch in my programming that is preventing it

Can someone please help me troubleshoot this code? I'm unable to figure out what's going wrong. The concept is to take user input, assign it to a variable, and then display a string. However, nothing appears on the screen after entering a name. ...

javascripthtmlcss

Show MaterialUI Dialog in fullscreen mode

I'm just starting out with React and Material-UI, and I'm trying to figure out how to print my current dialog. The issue I'm running into is that I can't seem to find a way to set the Dialog to full screen for printing while keeping it ...

cssreactjsmaterial-uireact-tsx

.comment {Visibility:hidden;} is only functioning on one specific page

What could be the reason behind this function only functioning on one page and not the others? The URL in question is . Specifically, the functionality is only active on the contact page while all other pages still display a comment section. ...

phphtmlcsswordpress