无法设置“材料设计数据表”的列宽

Question

我正在尝试在Vue应用程序中创建材料设计数据表。我在标题和td中都指定了列/单元格的宽度，但它们似乎被忽略了。表格的宽度为100％，第一列的宽度应仅为25％。

<table class="table mdl-data-table mdl-js-data-table mdl-data-table--referrals">
  <thead>
    <tr>
      <th class="mdl-data-table__cell--non-numeric mdl-cell--3-col">Name</th>
      <th class="mdl-data-table__cell--non-numeric mdl-cell--9-col">Status</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td class="mdl-data-table__cell--non-numeric mdl-cell--3-col">Drew Barrymore</td>
      <td class="mdl-data-table__cell--non-numeric mdl-cell--9-col">
        <div class="progress">
          <div
            class="progress-bar progress-bar-primary"
            role="progressbar"
            style="width:33%"
          >Referred</div>
          <div
            class="progress-bar progress-bar-warning"
            role="progressbar"
            style="width:33%"
          >Contacted</div>
          <div
            class="progress-bar progress-bar-success"
            role="progressbar"
            style="width:34%"
          >Hired</div>
        </div>
      </td>
    </tr>
  </tbody>
</table>

但是，如屏幕截图所示，第一列的宽度比25％大得多。

我在这里错过了一些额外的代码吗？