javascript - 圆边的边框塌陷？

Question

我正在尝试渲染一个没有边框但有圆边的 React 表格​​。我尝试使用 border-collapse: collapse，它删除了表格中各列之间出现的边框，但它也删除了我设置的 border-radius 属性。有没有人知道如何实现这一点？

下面是我如何设置表格的样式。请注意，我没有在任何地方指定边框，但它们仍然会出现。

moduleSection {
    border-radius: 4px;
    background-color: #fff;
}

下面是我在 JS 文件中创建表格的方式:

renderRow = (item) => {
    return (
        <tr key={item.id}>
            <td>
                {item.name}
            </td>
            <td>
                <div>
                    {item.status}
                </div>
            </td>
        </tr>
    );
}

render() {
        const items = this.props.items;

        return (
            <table className={styles.moduleSection}>
                <thead>
                    <tr>
                        <th>
                            <div>
                                Your Items
                            </div>
                        </th>
                        <th>
                            <div>
                                Item Status
                            </div>
                        </th>
                    </tr>
                </thead>
                <tbody>{items.map(this.renderRow)}</tbody>
            </table>
        );
    }

Answer 1

尝试改变 边界半径 = 4px；边界半径:4px； 并添加 边框:无；