CSSテーブルの境界線が下に表示されない

Question

私の目標は、この図のようにCSSの見出しの下に白い線の境界線を追加することです。table imageしかし、国境は現れていません。私は、HTMLとCSSに関するYouTubeのチュートリアルに沿って見てコーディングしていました。下の白い線の境界を追加した部分に到達するまで私の結果はうまくいったtutorial video at 1hr34min45sec。私が下の境界線を置いたとき、それは現れなかった。

すべてのヘルプは

.tile { 
 
    width: 170px; 
 
    border-radius: 2%; 
 
    height: 140px; 
 
    padding: 20px; 
 
    margin: 5px; 
 
    float:left; 
 
    
 
} 
 

 
.tile-double { 
 
    width: 390px; 
 
    height: 140px; 
 
    margin: 5px; 
 
    padding: 20; 
 
    float: left; 
 
    
 
} 
 
.orange { 
 
    background-color: #e61860; 
 
} 
 

 

 
#user-table { 
 
    border-collapse: collapse; 
 
    margin: 10px auto; 
 
    font-weight: normal; 
 
    width: 100%; 
 
    
 
} 
 

 
#user-table th{ 
 
    border-collapse: collapse; 
 
    border-bottom: 1xp solid #F6F6F6; 
 
    padding 2px; 
 
    text-align: center;s 
 
} 
 

 
#user-table td{ 
 
    padding: 2px; 
 
    text-align: center; 
 
}

  <div class="tile orange tile-double"> 
 
       <table id="user-table"> 
 
        <thead> 
 
         <tr> 
 
          <th>User</th> 
 
          <th>Product</th> 
 
          <th>Score</th> 
 
         </tr> 
 
        </thead> 
 
        <tbody> 
 
         <tr> 
 
          <td>FruitDealer</td> 
 
          <td>Razor Banshee</td> 
 
          <td>100%</td> 
 
         </tr> 
 
         <tr> 
 
          <td>DongRaeGu</td> 
 
          <td>Razor Banshee</td> 
 
          <td>100%</td> 
 
         </tr> 
 
         <tr> 
 
          <td>July</td> 
 
          <td>Razor Banshee</td> 
 
          <td>100%</td> 
 
         </tr> 
 
        </tbody> 
 
       </table> 
 
      </div>

Answer 1

をいただければ幸い具体的には、それらのバリデータを通して、あなたのコードを実行してください：

border-bottom: 1xp solid #F6F6F6; /* shows xp instead of px (pixels) */ 

https://validator.w3.org/ - HTML

0123のために- CSSの場合

Answer 2

theadのtrをターゲットにして、境界線がテーブルの全幅を埋めるようにしてください。

thead tr { border-bottom: 1px solid #FFF; } 

Answer 3

わかりました私は、マイナーなエラーがそれであるあなたのCSSをチェックアウトした{ 国境崩壊番目

＃ユーザ・テーブルをチェックアウト：崩壊。 border-bottom：1xp solid＃F6F6F6; --- 1pxの境界線が

padding 2px; ----- incorrect should be paddin: 2px; 
    text-align: center;s --- the s shouldn't be there 
} 

.tile { 
 
    width: 170px; 
 
    border-radius: 2%; 
 
    height: 140px; 
 
    padding: 20px; 
 
    margin: 5px; 
 
    float:left; 
 
    
 
} 
 

 
.tile-double { 
 
    width: 390px; 
 
    height: 140px; 
 
    margin: 5px; 
 
    padding: 20; 
 
    float: left; 
 
    
 
} 
 
.orange { 
 
    background-color: #e61860; 
 
} 
 

 

 
#user-table { 
 
    border-collapse: collapse; 
 
    margin: 10px auto; 
 
    font-weight: normal; 
 
    width: 100%; 
 
    
 
} 
 

 
#user-table th{ 
 
    border-collapse: collapse; 
 
    border-bottom: 1xp solid #F6F6F6; 
 
    padding 2px; 
 
    text-align: center;s 
 
} 
 

 
#user-table td{ 
 
    padding: 2px; 
 
    text-align: center; 
 
}

  <div class="tile orange tile-double"> 
 
       <table id="user-table"> 
 
        <thead> 
 
         <tr> 
 
          <th>User</th> 
 
          <th>Product</th> 
 
          <th>Score</th> 
 
         </tr> 
 
        </thead> 
 
        <tbody> 
 
         <tr> 
 
          <td>FruitDealer</td> 
 
          <td>Razor Banshee</td> 
 
          <td>100%</td> 
 
         </tr> 
 
         <tr> 
 
          <td>DongRaeGu</td> 
 
          <td>Razor Banshee</td> 
 
          <td>100%</td> 
 
         </tr> 
 
         <tr> 
 
          <td>July</td> 
 
          <td>Razor Banshee</td> 
 
          <td>100%</td> 
 
         </tr> 
 
        </tbody> 
 
       </table> 
 
      </div>

.tile { 
 
    width: 170px; 
 
    border-radius: 2%; 
 
    height: 140px; 
 
    padding: 20px; 
 
    margin: 5px; 
 
    float:left; 
 
    
 
} 
 

 
.tile-double { 
 
    width: 390px; 
 
    height: 140px; 
 
    margin: 5px; 
 
    padding: 20; 
 
    float: left; 
 
    
 
} 
 
.orange { 
 
    background-color: #e61860; 
 
} 
 

 

 
#user-table { 
 
    border-collapse: collapse; 
 
    margin: 10px auto; 
 
    font-weight: normal; 
 
    width: 100%; 
 
    
 
} 
 

 
#user-table th{ 
 
    border-collapse: collapse; 
 
    border-bottom: 1xp solid #F6F6F6; 
 
    padding 2px; 
 
    text-align: center;s 
 
} 
 

 
#user-table td{ 
 
    padding: 2px; 
 
    text-align: center; 
 
}

  <div class="tile orange tile-double"> 
 
       <table id="user-table"> 
 
        <thead> 
 
         <tr> 
 
          <th>User</th> 
 
          <th>Product</th> 
 
          <th>Score</th> 
 
         </tr> 
 
        </thead> 
 
        <tbody> 
 
         <tr> 
 
          <td>FruitDealer</td> 
 
          <td>Razor Banshee</td> 
 
          <td>100%</td> 
 
         </tr> 
 
         <tr> 
 
          <td>DongRaeGu</td> 
 
          <td>Razor Banshee</td> 
 
          <td>100%</td> 
 
         </tr> 
 
         <tr> 
 
          <td>July</td> 
 
          <td>Razor Banshee</td> 
 
          <td>100%</td> 
 
         </tr> 
 
        </tbody> 
 
       </table> 
 
      </div>