使用 Bootstrap 的表格列宽

Posted 2023-03-05

【中文标题】使用 Bootstrap 的表格列宽

【英文标题】：Table column width with Bootstrap

【发布时间】：2018-07-14 10:42:18

【问题描述】：

这是我在 *** 中的第一个问题，因为这是我第一次找不到可以帮助我解决问题的答案。 我正在尝试为带有引导程序的菜单制作表格。我希望早餐、午餐和晚餐栏的宽度各为 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，所以我希望它不是很明显。 提前致谢！

【参考方案1】：

您需要提供 CSS 规则

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

请注意，Bootstrap 确实带有 some predefined width classes，但仅适用于 25% 的倍数。

【参考方案2】：

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

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

【讨论】：

不，不要这样做。不要将您的样式破解到您的 html 中。这就是 CSS 的用途：样式表