自己的CSS网格：表标题宽度与表数据宽度无关

Question

由于我不使用Bootstrap，我创建了自己的CSS网格，并尝试将其应用于一个简单的表。但是当我使用我的网格类将宽度设置为<th>时，此宽度不适用于<td>。我的第一个表数据占据了表的所有宽度，推动了表外的其他四个表数据。有人知道为什么吗？

以下是我的表格和CSS网格的代码片段：

＆＃13;

＆＃13;

   .container-wrapper {
      position: absolute;
      display: flex;
      width: 100%;
      height: 100%;
    }

    /* GRID STYLE */

    .container-grid {
      width: 100%;
      box-shadow: -3px 0 7px 0 rgba(0,0,0,0.03);
      padding: 0 36px 0 36px;
      overflow-y: scroll;
    }
    .row:before,
    .row:after {
      content: "";
      display: table ;
      clear: both;
    }

    [class*='col-'] {
      float: left;
      min-height: 1px;
      width: 8.33%;
      text-align: left;
      /* gutter */
      padding: 12px;
    }
    .col-1{
      width: 8.33%;
    }
    .col-2{
      width: 16.66%;
    }
    .col-3{
      width: 25%;
    }
    .col-4{
      width: 33.33%;
    }
    .col-5{
      width: 41.66%;
    }
    .col-6{
      width: 50%;
    }
    .col-7{
      width: 58.33%;
    }
    .col-8{
      width: 66.66%;
    }
    .col-9{
      width: 75%;
    }
    .col-10{
      width: 83.33%;
    }
    .col-11{
      width: 91.66%;
    }
    .col-12{
      width: 100%;
    

＆＃13;

    <div>
        <table class="table col-12">
          <thead>
          <tr>
            <th class="col-2 add">Added</th>
            <th class="col-5 file">File</th>
            <th class="col-1 size">Size</th>
            <th class="col-2 status">Status</th>
            <th class="col-2 completed">Completed</th>
          </tr>
          </thead>
          <tbody>
          <tr>
            <td class="col-2 add">16:54 16/01/2018</td>
            <td class="col-5 file">sdf_fsdfsdf_fdsfsdfsdf.xlsx</td>
            <td class="col-1 size">1,32 Мб</td>
            <td class="col-2 status">
              <button>Processing</button>
            </td>
            <td class="col-2 completed">16/01/2018 15:23</td>
          </tr>
          <tr>
            <td class="col-2 add">16:54 16/01/2018</td>
            <td class="col-5 file">my_uber_file.csv</td>
            <td class="col-1 size">1,32 Мб</td>
            <td class="col-2 status">
              <button>Processing</button>
            </td>
            <td class="col-2 completed">16/01/2018 15:23</td>
          </tr>
          </tbody>
        </table>
      </div>

＆＃13;

＆＃13;

＆＃13;