边缘倒塌圆边？-Java 学习之路

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

这就是我对 table 造型的方式 . 注意我没有在任何地方指定边框，但它们仍然出现 .

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

3 回答

0

尝试更改border-radius = 4px;到border-radius：4px;并添加border：none;

回复于 2024-05-05T22:43:53+08:00

这是使用包装器div的示例：

<div style="display: table;
            padding: 2px;
            border-radius: 5px;
            border: 1px solid #999;">
  <TABLE style="border-collapse: collapse;">
    <THEAD>
      <TR style="background-color: red;">
        <TH>Weekday</TH>
        <TH>Date</TH>
        <TH>Manager</TH>
        <TH>Qty</TH>
      </TR>
    </THEAD>
    <TBODY>
      <TR>
        <TD>Mon</TD>
        <TD>09/11</TD>
        <TD>Kelsey</TD>
        <TD>639</TD>
      </TR>
      <TR>
        <TD>Tue</TD>
        <TD>09/12</TD>
        <TD>Lindsey</TD>
        <TD>596</TD>
      </TR>
      <TR>
        <TD>Sun</TD>
        <TD>09/17</TD>
        <TD>Susan</TD>
        <TD>272</TD>
      </TR>
    </TBODY>
  </TABLE>
</div>

注意：display：table; IE7及更早版本不支持 . IE8在文档中需要：！DOCTYPE . 所有现代浏览器（包括IE9）都支持它，所以它应该不是问题 .

回复于 2024-05-05T22:43:53+08:00

0
这是一张css工作表 . 你必须要有一些冲突的CSS来覆盖这些样式 . 这正如您在问题中发布的那样 . 它似乎工作 . 看小提琴 .

示例HTML：
```
<table class="moduleSection">
  <tr>
    <td>
      testing
    </td>
    <td>
      table
    </td>
  </tr>
  <tr>
    <td>
      testing
    </td>
    <td>
      table
    </td>
  </tr>
</table>
```
CSS：
```
.moduleSection {
    border-radius: 10px;
    background-color: #fff;
}
```
看到这个小提琴：https://jsfiddle.net/8s8jnmw7/

它甚至适用于边界崩溃添加：

https://jsfiddle.net/8s8jnmw7/1/

我在chrome，firefox和IE Edge中测试了这个 .
回复于 2024-05-05T22:43:53+08:00

边缘倒塌圆边？

3 回答

相关问题