引导表TD不遵守我的宽度设置

Question

我有一个使用普通vue的{​​{1}}应用，没有 Bootstrap 4。我在整个网站上{@ {1}}都在工作，除了一个人，其他人都在工作，我不知道为什么。我什至已经尝试了一个可以正常工作的工具，并且尝试了一下，但它仍然没有收听Vue-Bootstrap。

HTML

responsive-table

通过水平滚动给出以下内容。请注意，我的“说明”列宽度小于“项目”宽度，但绝对不是3％。

我所有其他表都是以这种方式设置的，此页面中没有添加其他CSS来“破坏”它

如果我使用widths将第一个<div class="form-group row"> <div class="col-12"> <div class="table-responsive"> <table class="table table-striped table-hover"> <thead> <tr> <th scope="col" style="width: 8%">Item</th> <th scope="col" style="width: 3%">Description</th> <th scope="col" style="width: 5%">Brand</th> <th scope="col" class="text-right" style="width: 4%">RRP</th> <th scope="col" class="text-right" style="width: 4%">Price</th> <th scope="col" style="width: 4%">Stock level</th> <th scope="col" style="width: 5%">Weight (KG)</th> <th scope="col" style="width: 6%">EAN</th> <th scope="col" style="width: 5%">MPN</th> <th scope="col" style="width: 31%">Web friendly name</th> </tr> </thead> <tbody> <tr v-for="product in stock"> <td scope="row">{{product.item}}</td> <td class="text-truncate"> <span v-tooltip:bottom.html="product.description">{{product.description}}</span> </td> <td>{{product.class}}</td> <td class="text-right">{{product.retail_price | amountFormat}}</td> <td class="text-right">{{product.price_each | amountFormat}}</td> <td>{{product.free_stock}}</td> <td>{{product.weight}}</td> <td class="text-truncate"> <span v-tooltip:bottom.html="product.ean">{{product.ean}}</span>{{product.ean}}</td> <td class="text-truncate"> <span v-tooltip:bottom.html="product.mpn">{{product.mpn}}</span>{{product.mpn}} </td> <td class="text-truncate"> <span v-tooltip:bottom.html="product.web_name">{{product.web_name}}</span> </td> </tr> </tbody> </table> </div> </div> </div> devtools更改为2％，它也不会更新，也不知道为什么

Answer 1

据我所知，引导程序自动使用表等来满足响应性。但是，在您的图像片段中，我没有看到您的其他列，也许如果您添加其余的列，它会自行修复吗？因为“描述”是一个相当长的词，所以我不知道是否可以像这样改变它的宽度。您可能需要更改其文本大小，从而可以更改列宽。不过这只是我的猜测。