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

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

我该怎么办？我尝试使用border-color但它没有这样做

Answer 1

你只需要删除'border-collapse：collapse;'来自CSS。应该工作。

获得带圆角的桌子及其周围的边框

1 个答案: