Why is my table not getting rounded corners?

Question

I have this table on this page of mine. Now I need a border radius on the table, so have have the following styles applied:

.toy-cart-table > thead > tr {
    background: #f9bbcf;
    border-radius: 10px;
    /* padding-left: 2.00em; */
    border: 1px solid #cccccc;
    border-top-right-radius: 10px;
    border-top-left-radius: 10px;
}

.toy-cart-table > thead > tr > th {
    padding: 0.75em;
    padding-left: 1.78em;
    font-size: 1.12em;
    border-top-right-radius: 10px;
    border-top-left-radius: 10px;
    /* border: 1px solid #cccccc; */
}

.toy-cart-table {
    width: 100%;
    /* border: 1px solid #cccccc; */
    border-top-right-radius: 10px;
    border-top-left-radius: 10px;
    border-collapse: collapse;
}

<table class="toy-cart-table">
    <thead>
        <tr>
            <th colspan="2">Toys to be Returned</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td><img src="images/res/toy-cart/1.png" alt="toy cart image"></td>
            <td><p>Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat.</p></td>
        </tr>
        <tr>
            <td><img src="images/res/toy-cart/2.png" alt="toy cart image"></td>
            <td><p>Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat.</p></td>
        </tr>
    </tbody>
</table>

But even though I have border radius applied to the child and parent elements I still don't get rounded corners, why? my table still looks like the below:

Why am I not getting rounded corners?

I saw this thread but it's not really helpful.

mrid · Answer 1 · 2016-09-17T06:21:04.890

You should remove border-collapse: collapse; from toy-cart-table

    .toy-cart-table > thead > tr {
        background: #f9bbcf;
        border-radius: 10px;
        /* padding-left: 2.00em; */
        border: 1px solid #cccccc;
        border-top-right-radius: 10px;
        border-top-left-radius: 10px;
    }

.toy-cart-table > thead > tr > th {
    padding: 0.75em;
    padding-left: 1.78em;
    font-size: 1.12em;
    border-top-right-radius: 10px;
    border-top-left-radius: 10px;
    /* border: 1px solid #cccccc; */
}

.toy-cart-table {
    width: 100%;
     border: 1px solid #cccccc;
    border-top-right-radius: 10px;
    border-top-left-radius: 10px;
}

<table class="toy-cart-table">
                <thead>
                    <tr>
                        <th colspan="2">Toys to be Returned</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td><img src="images/res/toy-cart/1.png" alt="toy cart image"></td>
                        <td><p>Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat.</p></td>
                    </tr>
                    <tr>
                        <td><img src="images/res/toy-cart/2.png" alt="toy cart image"></td>
                        <td><p>Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat.</p></td>
                    </tr>
                </tbody>
            </table>

i loose the grey border then ! :( – Alexander Solonik Sep 17 '16 at 06:16 — Alexander Solonik, Sep 17 '16 at 06:16
Thanks i will try it and get back to u ! Thanks . – Alexander Solonik Sep 17 '16 at 06:27 — Alexander Solonik, Sep 17 '16 at 06:27

jarvo69 · Answer 2 · 2016-09-17T06:20:13.553

1

wont work with

 border-collapse: collapse;

use border-collapse: unset;

.toy-cart-table {
border: 1px solid #e8e8e8;
border-collapse: unset;
border-top-left-radius: 10px;
border-top-right-radius: 10px;
width: 100%;

}

edited Sep 17 '16 at 06:20

answered Sep 17 '16 at 06:14

jarvo69

7,908
2
18
28

i loose the grey border then ! :( – Alexander Solonik Sep 17 '16 at 06:16

score 0 · Answer 3 · answered Sep 17 '16 at 06:20

0

I have to agree with the above answers. Rounded borders wont work with border-collapse: collapse;. Try removing this style.

answered Sep 17 '16 at 06:20

Xavier

109
9

If you want the border you mentioned then style the element that contains the border. You might have to create more class names. – Xavier Sep 17 '16 at 06:21

Why is my table not getting rounded corners?

3 Answers3