Bootstrap table header issue

http://stackoverflow.com/questions/31176588/bootstrap-table-header-issue

by Nithin Madhuranga

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<table class="table table-bordered">
      <thead>
        <tr>
          <th width="5%">#</th>
          <th width="40%">First Name</th>
          <th width="40%">Last Name</th>
          <th width="15%">Username</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <th width="5%" scope="row">1</th>
          <td width="40%">Mark</td>
          <td width="40%">Otto</td>
          <td width="15%">@mdo</td>
        </tr>
        <tr>
          <th width="5%" scope="row">2</th>
          <td width="40%">Jacob</td>
          <td width="40%">Thornton</td>
          <td width="15%">@fat</td>
        </tr>
        <tr>
          <th width="5%" scope="row">3</th>
          <td width="40%">Larry</td>
          <td width="40%">the Bird</td>
          <td width="15%">@twitter</td>
        </tr>
      </tbody>
    </table>