skip to Main Content

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


  1. Try adding inline style to the <table> tag so your code should look like

    
                                        <!-- whatever css unit you like -->
    <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> 
            <!--- rest of the code -->
    
    
    

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

    .your__class_name{
      border-radius:1.56rem !important;
      //rest of the styles
    }
    
    Login or Signup to reply.
  2. Include the border-collapse: ... ; CSS property on the table itself

    The border-collapse CSS property sets whether cells inside a have shared or separate borders.

    .reasonCode-table {
        border-collapse: separate;
    }
    
    /* ----- */
    
    .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>

    You can also use this if you want the border-radius to apply to only the table itself and not the individual cells:

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

    Source: https://developer.mozilla.org/en-US/docs/Web/CSS/border-collapse

    Source: https://unused-css.com/blog/css-rounded-table-corners/

    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search