滚动时固定表头，但列宽仍然根据正文行中的内容动态更改

Question

所以我的问题是我需要在向下滚动窗口时有一个带有固定标题的表，但是如果我使用position：fixed，那么我需要为列标题设置一个手动宽度，重点是它们需要根据内容进行扩展。 因为如果没有，当主体上的内容有更多文本时，它们往往会重叠到下一个列标题。

这是我的代码：JsFiddle

<table class="table table-striped col-md-12 table-condensed cf">
      <thead class="table-bordered cf">
        <tr>
          <th>Name</th>
          <th>Last name</th>
          <th>Color</th>
          <th>Data</th>
          <th>More data</th>
          <th>Data</th>
        </tr>
      </thead>
      <tbody>
             <tr>
          <td > My Name</td>
          <td>Brown</td>
          <td>red</td>
          <td>sadfasf</td>
          <td>sfs</td>              
          <td>dsfsf</td>

        </tr>
             <tr>
          <td > My Name</td>
          <td>Brown</td>
          <td>red</td>
          <td>sadfasf</td>
          <td>sfs</td>              
          <td>dsfsf</td>

        </tr>
             <tr>
          <td > My Name</td>
          <td>Brown</td>
          <td>red</td>
          <td>sadfasf</td>
          <td>sfs</td>              
          <td>dsfsf</td>

        </tr>
             <tr>
          <td > My Name</td>
          <td>Brown</td>
          <td>red</td>
          <td>sadfasf</td>
          <td>sfs</td>              
          <td>dsfsf</td>

        </tr>
             <tr>
          <td > My Name</td>
          <td>Brown</td>
          <td>red</td>
          <td>sadfasf</td>
          <td>sfs</td>              
          <td>dsfsf</td>

        </tr>
             <tr>
          <td > My Name</td>
          <td>Brown</td>
          <td>red</td>
          <td>sadfasf</td>
          <td>sfs</td>              
          <td>dsfsf</td>

        </tr>
             <tr>
          <td > My Name</td>
          <td>Brown</td>
          <td>red</td>
          <td>sadfasf</td>
          <td>sfs</td>              
          <td>dsfsf</td>

        </tr>
             <tr>
          <td > My Name</td>
          <td>Brown</td>
          <td>red</td>
          <td>sadfasf</td>
          <td>sfs</td>              
          <td>dsfsf</td>
      </tbody>
    </table>

CSS：

  thead{
  position:fixed; }