javascript – Como hago para se estire por toda la tabla mi thead y mi tbody

como hago para que mi <thead></thead> mi <tbody></tbody> se ajuste a todo la tabla

Bueno el <thead></thead> mi tabla es statico y el <tbody></tbody> tiene un scroll para poder ver no . pero como pueden ver no se acopla al ancho de mi tabla sinos sigue a existiendo campos vacios

alguna sugerencia para que mi <tbody></tbody> y mi <thead></thead> se auto ajuste a mi width de mi table

tengo el siguiente ejemplo de mi table

 $('table').on('scroll', function() {
  $("#" + this.id + " > *").width($(this).width() + $(this).scrollLeft());
});
html {
  font-family: verdana;
  font-size: 10pt;
  line-height: 25px;
}

table {
  border-collapse: collapse;
  width: 300px;
  overflow-x: scroll;
  display: block;
}

thead {
  background-color: #121F3D;
  color:white;
}

thead,
tbody {
  display: block;
}

tbody {
  overflow-y: scroll;
  overflow-x: hidden;
  height: 140px;
}

td,
th {
  min-width: 100px;
  height: 25px;
  border: dashed 1px lightblue;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100px;
    border-color:red;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="container-fluid">
  <div class="row">
    <div class="col-sm-6 col-md-6">
      <div class="table-responsive">
        <table class="table" id="table1">
          <thead>
            <tr>

              <th>Firstname</th>
              <th>Lastname</th>
              <th>Age</th>
            </tr>
          </thead>
          <tbody>
            <tr>
              <td>1</td>
              <td>Mantenimiento De Vehiculos Y Ayuda A De Cables Sss</td>
              <td>Pitt</td>
            </tr>
            <tr>
              <td>1</td>
              <td>Anna</td>
              <td>Pitt</td>
            </tr>
            <tr>
              <td>1</td>
              <td>Anna</td>
              <td>Pitt</td>
            </tr>
            <tr>
              <td>1</td>
              <td>Anna</td>
              <td>Pitt</td>
            </tr>
            <tr>
              <td>1</td>
              <td>Anna</td>
              <td>Pitt</td>
            </tr>
            <tr>
              <td>1</td>
              <td>Anna</td>
              <td>Pitt</td>
            </tr>
            <tr>
              <td>1</td>
              <td>Anna</td>
              <td>Pitt</td>
            </tr>
            <tr>
              <td>1</td>
              <td>Anna</td>
              <td>Pitt</td>
            </tr>
            <tr>
              <td>1</td>
              <td>Anna</td>
              <td>Pitt</td>
            </tr>
            <tr>
              <td>1</td>
              <td>Anna</td>
              <td>Pitt</td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>
    

Bueno como en mi ejemplo muestro mi table. sus columnas no se ajustan en toda la tabla sinos se limitan

Me gustaria que la las columnas ocupen todo su width de mi table pero sin perder el <thead></thead/> estatico .

alguna soluciĆ³n gracias