引导程序固定标头的表标头宽度

Question

我试图保持标题固定并滚动正文部分。但是我正面临有关表头宽度的问题。有没有办法解决这个问题而不分配预定义的宽度，因为对于长标题来说，宽度将是与下一个标题重叠的问题？

.fixed_headers {
  width: 100%;
  table-layout: fixed;
  border-collapse: collapse;
}

.fixed_headers thead {
  background-color: #333;
  color: #FDFDFD;
}
.fixed_headers thead tr {
  display: block;
 
}
.fixed_headers tbody {
  display: block;
  overflow: auto;
  width: 100%;
  height: 300px;
}
.fixed_headers tbody tr:nth-child(even) {
  background-color: #DDD;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<table class=" table table-bordered  fixed_headers">
  <thead>
    <tr>
      <th>Name</th>
      <th>Color</th>
      <th>Description of it </th>
           <th>Name</th>
      <th>Color</th>
      <th>Description</th>
           <th>Name</th>
      <th>Color</th>
      <th>Description</th>
      
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Apple</td>
      <td>Red</td>
      <td>These are red.These are red.</td>
       <td>Apple</td>
      <td>Red</td>
      <td>These are red.</td>
    </tr>
    
    <tr>
      <td>Pear</td>
      <td>Green</td>
      <td>These are green.</td>
       <td>Apple</td>
      <td>Red</td>
      <td>These are red.</td>
    </tr>
    <tr>
      <td>Grape</td>
      <td>Purple / Green</td>
      <td>These are purple and green.</td>
       <td>Apple</td>
      <td>Red</td>
      <td>These are red.</td>
    </tr>
    <tr>
      <td>Orange</td>
      <td>Orange</td>
      <td>These are orange.</td>
       <td>Orange</td>
      <td>Orange</td>
      <td>These are orange.</td>
    </tr>
   
  </tbody>
</table>