来自 BootstrapVue 的 b-table：在使宽度适合内容时响应迅速

Question

BootstrapVue b-table 的 width 如何在响应式的同时适应其内容 同时?

我试过将 class w-auto 与 table 样式组合 responsive。一旦我使用后者， w-auto 就会被否决。
具有响应式 table 是实用的，因为当 table 大小超过其容器大小时具有滚动条的事实。但是当情况并非如此时，我希望 table 不大于其内容。

Here 是 codepen.io.

中的示例

Answer 1

当您使用 responsive 属性时，会在 <table> 周围添加一个包装器 <div>。这意味着当您使用 class 时，它将被添加到包装器 <div> 而不是 table 本身。

要将 class w-auto 添加到 <table>，您应该改用 table-class 属性。

new Vue({
  el: "#app",
  data() {
    return {
      items: [
        { age: 40, first_name: "Dickerson", last_name: "Macdonald" },
        { age: 21, first_name: "Larsen", last_name: "Shaw" },
        { age: 89, first_name: "Geneva", last_name: "Wilson" },
        { age: 38, first_name: "Jami", last_name: "Carney" }
      ]
    };
  }
});

<link type="text/css" rel="stylesheet" href="//unpkg.com/bootstrap@4.5.3/dist/css/bootstrap.min.css" />
<link href="https://unpkg.com/bootstrap-vue@2.21.2/dist/bootstrap-vue.css" rel="stylesheet" />

<script src="//unpkg.com/vue@2.6.12/dist/vue.min.js"></script>
<script src="//unpkg.com/bootstrap-vue@2.21.2/dist/bootstrap-vue.min.js"></script>


<div id="app">
  <b-table striped hover responsive table-class="w-auto" :items="items"></b-table>
</div>

来自 BootstrapVue 的 b-table：在使宽度适合内容时响应迅速

b-table from BootstrapVue: responsive while fitting width to content

responsive

bootstrap-vue