CODEWITHSUNDEEP
htmlcsscss-tables
Alexander Solonik
Alexander Solonik

Reputation: 10240

Why is my table not getting rounded corners?

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:

enter image description here

Why am I not getting rounded corners?

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

Upvotes: 0

Views: 308

Answers (3)

mrid
mrid

Reputation: 5794

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>

Upvotes: 2

jarvo69
jarvo69

Reputation: 8349

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%;

}

Upvotes: 1

Xavier
Xavier

Reputation: 133

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

Upvotes: 0

Related Questions