带有圆边的边框塌陷？

我想渲染一个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> 
     ); 
    }

来源

2016-08-16 user3802348

尝试将边框宽度设置为0. –

嗯，没有运气:( – user3802348

尝试改变边界半径= 4PX;到border-radius：4px; 并添加 border：none;

来源

2016-08-16 14:22:35

糟糕，=在我的代码中是一个复制错误，我尝试添加边框：没有运气的情况下 – user3802348

尝试添加边框：无表，tr＆td在Css –

下面是使用的包装的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>

注：显示：表;在IE7和更早版本中不受支持。 IE8在文档中需要一个：！DOCTYPE。所有现代浏览器（包括IE9）都支持它，所以它不应该是一个问题。

来源

2016-08-16 14:34:51

它适合我请不donot有负面投票 –

感谢您的答复 - 不幸的是这并不适用于我:( – user3802348

下面是一个表格与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中测试过了。

来源

2016-08-17 08:17:41

带有圆边的边框塌陷？

回答

相关问题