2017-02-06 25 views
2

テーブルをフォーマットするには、以下のCSSクラスを使用しています。表には外枠のみが表示され、内枠は表示されません。テーブル内枠が表示されない

他のスタイリングオプションは設定されていません。ちょうど<table class="my-table">です。

私は間違っていますか間違っていますか?

table.my-table { 
 
     border: solid thin; 
 
     border-collapse: separate; 
 
     border-spacing: 0px; 
 
     border-color: black; 
 
     margin-left: auto; 
 
     margin-right: auto; 
 
     margin-top: 10px; 
 
     font-size: 14px; 
 
    } 
 
    
 
      table.my-table tbody th { 
 
       background: rgb(28, 58, 112); 
 
       background: rgba(28, 58, 112, 1); 
 
       color: rgb(255,255,255); 
 
       color: rgba(255,255,255,1); 
 
      } 
 
    
 
      table.my-table tbody tr:nth-child(even) { 
 
       background: rgb(255, 255, 255); 
 
       background: rgba(255, 255, 255, .8); 
 
      } 
 
    
 
      table.my-table tbody tr:nth-child(odd) { 
 
       background: rgb(239, 239, 239); 
 
       background: rgba(239, 239, 239, .8); 
 
      } 
 
    
 
      table.my-table tbody td { 
 
       background: rgb(255, 255, 255); 
 
       background: rgba(255, 255, 255, 1); 
 
       color: rgb(0, 0, 0); 
 
       color: rgba(0, 0, 0, 1); 
 
      }
<table class="my-table"> 
 
    <tr> 
 
    <td>test</td> 
 
    <td>test 2</td> 
 
    </tr> 
 
    <tr> 
 
    <td>test</td> 
 
    <td>test 2</td> 
 
    </tr> 
 
    <tr> 
 
    <td>test</td> 
 
    <td>test 2</td> 
 
    </tr> 
 
</table>

答えて

4

私は、間違って行わ/何をしてください見逃していますか?

テーブルの境界線のみを設定しました。

CSS borderプロパティは、廃止されたborder属性と同等ではありません。

セルに罫線を設定する場合は、それらのセルをターゲットとするセレクタを作成し、borderを設定する必要があります。

1

CSS境界プロパティを使用すると、要素の境界のスタイル、幅、および色を指定できます。コードでは、表の個々のセルではなく、表のスタイルを設定します。 これを修正するには、

table.my-table tbody td { 
      border: solid thin;