Get table with round corners and border around it

Question

I have table with some rows and columns and some text before and after the table. see fiddle.

html:

<div>
    <div>
        some text.....
    </div>
    <table class="children-table" style="width: 100%">
        <tbody>
            <tr class="title-table">
                <td class="name">
                    name
                </td>
                <td class="order-reason">
                    reason
                </td>
                <td class="cost">
                    cost
                </td>
            </tr>
            <tr class="child-record">
                <td class="name">
                    Dan
                </td>
                <td class="order-reason">
                    Stolen
                </td>
                <td class="cost">
                    10
                </td>
            </tr>
            <tr>
                <td colspan="3">
                    <div class="thick-divide">
                    </div>
                </td>
            </tr>
            <tr class="bold total">
                <td class="name" colspan="2">
                    total
                </td>
                <td class="cost">
                    10
                </td>
            </tr>
        </tbody>
    </table>
    <div>
        another text...
    </div>
</div>

css:

table.children-table
{
    border-style: solid;
    border-width: 1px;
    overflow: hidden;
    border-collapse: collapse;
    border-color: red;
    border-radius: 10px;
}

tr.title-table
{
    background: black;
    color: white;
}
tr.total
{
    padding: 2% 2% 2% 0;
    background: white;
}
tr.child-record
{
    background: white;
}
td.name
{
    width: 20%;
    padding: 1% 2% 1% 2%;
}
td.order-reason
{
    width: 60%;
    padding: 1% 2% 1% 0;
}
td.cost
{
    width: 20%;
    direction: ltr;
    padding: 1% 2% 1% 3%;
}
td.bold
{
    font-weight: bold;
}
 .thick-divide
{
    height: 0px;
    width: 100%;
    font-weight: bold;
    border: 0;
    border-top: 3px solid #E0E0E0;
}

I want to have a border around the table (to be round on the corner).

How can I do it? I tried to use border-color but it doesn't do it

If the answer worked for you, please accept it. Otherwise let us know how we can further help! — Adam Konieska, Nov 18 '15 at 21:08
@Paulie_D you right, it had the answer I needed. Worked perfectly — Dror, Nov 19 '15 at 12:13

score 1 · Answer 1 · answered Nov 18 '15 at 15:05

1

You just need to remove 'border-collapse: collapse;' from the css. Should work then.

answered Nov 18 '15 at 15:05

Adam Konieska

2,805
3
14
27

It's true the corner border shown, but it's doesn't look good because there's like padding between the round border to the table, see [https://jsfiddle.net/oeagej90/3/](https://jsfiddle.net/oeagej90/3/) – Dror Nov 19 '15 at 06:08
@Dror in that case, you can add `border-spacing: 0;` to `table.children-table` and that will remove the spacing between the border and the table. Hope that helps! – Adam Konieska Nov 19 '15 at 14:08

Get table with round corners and border around it

1 Answers1