Tabellenzeile wird nicht auf volle Breite erweitert

Question

Ich habe eine Tabelle und wenn ich die Tabelle auf eine Breite von 100% und die Tabellenzeilen auf eine Breite von 100% setze passiert nichts oder ändert sich auf die Breite.

.Table-Normal { 
 
    position: relative; 
 
    display: block; 
 
    margin: 10px auto; 
 
    padding: 0; 
 
    width: 100%; 
 
    height: auto; 
 
    border-collapse: collapse; 
 
    text-align: center; 
 
} 
 

 
.Table-Normal thead tr { 
 
    background-color: #E74C3C; 
 
    font-weight: bold; 
 
} 
 

 
.Table-Normal tr { 
 
    margin: 0; 
 
    padding: 0; 
 
    border: 0; 
 
    border: 1px solid #999; 
 
    width: 100%; 
 
} 
 

 
.Table-Normal tr td { 
 
    margin: 0; 
 
    padding: 4px 8px; 
 
    border: 0; 
 
    border: 1px solid #999; 
 
} 
 

 
.Table-Normal tbody tr:nth-child(2) { 
 
    background-color: #EEE; 
 
}

<table id="top-leader" class="Table-Normal"> 
 
    <thead> 
 
     <tr> 
 
      <td>Position</td> 
 
      <td>Name</td> 
 
      <td>Kills</td> 
 
      <td>Deaths</td> 
 
     </tr> 
 
    </thead> 
 
    <tbody> 
 
     <tr> 
 
      <td>1</td> 
 
      <td>John Doe</td> 
 
      <td>16 Kills</td> 
 
      <td>0 Deaths</td> 
 
     </tr> 
 

 
     <tr> 
 
      <td>2</td> 
 
      <td>John Smith</td> 
 
      <td>13 Kils</td> 
 
      <td>1 Death</td> 
 
     </tr> 
 

 
     <tr> 
 
      <td>3</td> 
 
      <td>Bob Smith</td> 
 
      <td>11 Kills</td> 
 
      <td>0 Deaths</td> 
 
     </tr> 
 
    </tbody> 
 
</table>

Answer 1

display: block in .Table-Normal

Fiddle entfernen

.Table-Normal { 
    position: relative; 
    //display: block; 
    margin: 10px auto; 
    padding: 0; 
    width: 100%; 
    height: auto; 
    border-collapse: collapse; 
    text-align: center; 
} 

Answer 2

von display: block Angabe Sie den Standardwert aus dem Browser Sheet für das table Element haben überschrieben: display: table. Entfernen display: block oder Ersetzen durch display: table behebt dies.