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

Posted 2023-03-05

【中文标题】获取带有圆角和边框的表格[重复]

【英文标题】：Get table with round corners and border around it [duplicate]

【发布时间】：2016-02-20 09:14:57

【问题描述】：

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

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

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

【问题讨论】：

如果答案对您有用，请接受。否则，请告诉我们如何进一步提供帮助！

@Paulie_D 你说得对，它有我需要的答案。完美运行

【参考方案1】：

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

【讨论】：

显示的角边框是真的，但看起来不太好，因为圆边框到桌子之间有填充，请参阅https://jsfiddle.net/oeagej90/3/

@Dror 在这种情况下，您可以将border-spacing: 0; 添加到table.children-table，这将删除边框和表格之间的间距。希望有帮助！