Question

我在这个页面上有这个表。现在我需要在桌面上使用边框半径，因此应用了以下样式：

＆＃13;

.toy-cart-table > thead > tr {
    background: #f9bbcf;
    border-radius: 10px;
    /* padding-left: 2.00em; */
    border: 1px solid #cccccc;
    border-top-right-radius: 10px;
    border-top-left-radius: 10px;
}

.toy-cart-table > thead > tr > th {
    padding: 0.75em;
    padding-left: 1.78em;
    font-size: 1.12em;
    border-top-right-radius: 10px;
    border-top-left-radius: 10px;
    /* border: 1px solid #cccccc; */
}

.toy-cart-table {
    width: 100%;
    /* border: 1px solid #cccccc; */
    border-top-right-radius: 10px;
    border-top-left-radius: 10px;
    border-collapse: collapse;
}

＆＃13;

<table class="toy-cart-table">
    <thead>
        <tr>
            <th colspan="2">Toys to be Returned</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td><img src="images/res/toy-cart/1.png" alt="toy cart image"></td>
            <td><p>Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat.</p></td>
        </tr>
        <tr>
            <td><img src="images/res/toy-cart/2.png" alt="toy cart image"></td>
            <td><p>Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat.</p></td>
        </tr>
    </tbody>
</table>

＆＃13;

但即使我将边缘半径应用于孩子和父母元素，我仍然没有圆角，为什么？我的桌子看起来仍然如下：

为什么我没有圆角？

我看到了this帖子，但它并没有真正帮助。

Answer 1

您应该从border-collapse: collapse;

中删除toy-cart-table

＆＃13;

    .toy-cart-table > thead > tr {
        background: #f9bbcf;
        border-radius: 10px;
        /* padding-left: 2.00em; */
        border: 1px solid #cccccc;
        border-top-right-radius: 10px;
        border-top-left-radius: 10px;
    }

.toy-cart-table > thead > tr > th {
    padding: 0.75em;
    padding-left: 1.78em;
    font-size: 1.12em;
    border-top-right-radius: 10px;
    border-top-left-radius: 10px;
    /* border: 1px solid #cccccc; */
}

.toy-cart-table {
    width: 100%;
     border: 1px solid #cccccc;
    border-top-right-radius: 10px;
    border-top-left-radius: 10px;
}

＆＃13;

<table class="toy-cart-table">
                <thead>
                    <tr>
                        <th colspan="2">Toys to be Returned</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td><img src="images/res/toy-cart/1.png" alt="toy cart image"></td>
                        <td><p>Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat.</p></td>
                    </tr>
                    <tr>
                        <td><img src="images/res/toy-cart/2.png" alt="toy cart image"></td>
                        <td><p>Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat.</p></td>
                    </tr>
                </tbody>
            </table>

＆＃13;

Answer 2

无法使用

 border-collapse: collapse;

使用border-collapse: unset;

.toy-cart-table {
border: 1px solid #e8e8e8;
border-collapse: unset;
border-top-left-radius: 10px;
border-top-right-radius: 10px;
width: 100%;

}

Answer 3

我必须同意上述答案。圆形边框不适用于border-collapse: collapse;。尝试删除此样式。

为什么我的桌子没有圆角？

3 个答案: