帶有圓邊的邊框塌陷？

我想渲染一個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

帶有圓邊的邊框塌陷？

回答

相關問題