Html 找一张有圆角和边框的桌子

我有一个表格，表格前后有一些行和列以及一些文本。看

html:

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

---

我怎么做？我尝试使用边框颜色，但它不起作用

您只需删除“边框塌陷：塌陷；”来自css。如果答案对你有效，请接受它。否则，请让我们知道如何进一步提供帮助@保利说得对，它有我需要的答案。工作完美显示的角边框是正确的，但看起来不太好，因为圆形边框和桌子之间有填充物，请参见@Dror在这种情况下，您可以添加

边框间距：0

到

表。子表

，这将删除边框和表之间的间距。希望有帮助！

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

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