Question

这是我在StackOverflow中的第一个问题，因为这是我第一次找不到帮助我解决问题的答案。
我正在尝试为带有引导程序的菜单创建一个表。我希望早餐，午餐和晚餐的每列宽度为30％，而且要说碳水化合物，脂肪和蛋白质10％，但是我无法使其工作。
我通读了the documentation，实际上发现了一个非常相似的静止here。但是，我仍然无法使其发挥作用。我把我的代码here in CodePen放在一边，这样你就能看到我所看到的内容。

<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>

任何人都可以帮助我发现我缺少的东西吗？我刚刚学会自己编写代码大约3个月，并在上周开始使用bootstrap，所以我希望这不是很明显的事情。
提前谢谢！

Answer 1

您需要提供CSS规则

table .w-10 { width:10%; }
table .w-30 { width:30%; }

请注意，Bootstrap确实附带some predefined width classes，但只有25％的倍数。

Answer 2

尝试使用 style="width:30%"或10％对于每个元素。

点击此处了解更多信息： Bootstrap - how to set up fixed width for <td>?

表格列宽与Bootstrap

2 个答案: