Table row not expanding to full width

Question

I have a table and when I set the table to a width of 100% and the table rows to a width pf 100% nothing happens or changes to the width.

.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

Remove display: block in .Table-Normal

Fiddle

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

Answer 2

By specifying display: block you've overriding the default value from the browser stylesheet for the table element: display: table. Removing display: block or replacing it with display: table fixes this.