获取带有圆角和边框的表格[重复]

Question

我的表格有一些行和列以及表格前后的一些文本。见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;
}

我想在桌子周围有一个边框（在拐角处是圆的）。

我该怎么做？我尝试使用边框颜色，但它不这样做

Answer 1

你只需要删除'border-collapse:collapse;'从CSS。那么应该可以工作了。