Tabelle Spaltenbreite mit Bootstrap

Dies ist meine erste Frage bei StackOverflow, weil es das erste mal, dass ich nicht in der Lage gewesen, eine Antwort zu finden, die mir geholfen haben mein problem zu lösen.

Ich bin versucht, einen Tisch für ein Menü mit bootstrap. Ich will das Frühstück, Mittag-und Abendessen Spalten der Breite bis zu 30%, und die einen sagen Kohlenhydrate, Fett und Proteine 10%, aber ich kann nicht damit es funktioniert.

Ich lese durch die Dokumentation und fand tatsächlich einen ziemlich ähnlichen quiestion hier. Aber ich kann immer noch nicht damit es funktioniert.
Ich legte meinen code hier in CodePen so können Sie sehen, was ich sehe.

HTML:

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<table class="table table-bordered">
  <thead>
    <tr class="m-0">
      <th class="w-10">#</th>
      <th class="w-30">Breakfast</th>
      <th class="w-30">Lunch</th>
      <th class="w-30">Dinner</th>
    </tr>
  </thead>
  <tbody>
    <tr class="m-0">
      <th scope="row" class="w-10">Carbohydrates</th>
      <td class="w-30">-
      </td>
      <td class="w-30">
        -
      </td>
      <td class="w-30">-
      </td>
    </tr>
    <tr class="m-0">
      <th scope="row" class="w-10">Fat</th>
      <td class="w-30">-
      </td>
      <td class="w-30">
        -
      </td>
      <td class="w-30">-
      </td>
    </tr>
    <tr class="m-0">
      <th scope="row" class="w-10">Proteins</th>
      <td class="w-30">-
      </td>
      <td class="w-30">
        -
      </td>
      <td class="w-30">-
      </td>
    </tr>
  </tbody>
</table>

Kann mir jemand helfen-spot, was mir fehlt? Ich habe gerade das lernen zu code, der auf meinem eigenen für über 3 Monate und begann mit bootstrap Letzte Woche, so hoffe ich, es ist nicht etwas, das sehr offensichtlich.

Vielen Dank im Voraus!