React里table表格設置邊框屬性border="1"無效？？？

有的小伙伴可能嘗試過如下寫法，在React渲染表格時設置邊框

 

設置后發現無效？？？

 

原因：

其實認真說起來這些table中的border屬性也已不在HTML5標准中。這也不是React的問題，只是它遵守HTML5規范而已。
所以以后React里改用CSS方式實現邊框，如下所示

普通寫法：
<table border="2" cellpadding="5" cellspacing="0" width="40%">
    <tr><td> aaa </td><td> bbb </td></tr>
    <tr><td> ccc </td><td> ddd </td></tr>
</table>
React寫法：
<table class="mytable">
    <tr><td> aaa </td><td> bbb </td></tr>
    <tr><td> ccc </td><td> ddd </td></tr>
</table>​

CSS樣式設置如下：

        table.mytable {
            width: 40%;
            border: 2px solid #444;  
            border-spacing: 0;    
        }
        table.mytable tr,table.mytable th {border-bottom: 1px solid #444}
        table.mytable td,table.mytable th{
            border-right: 1px solid #444;
            border-bottom: 1px solid #444;
            padding: 5px;
        }
        table.mytable tr td:last-child{ border-right: 0 }
        table.mytable tr:last-child td{ border-bottom: 0 }

 

 

 

 

 

 

.