bootstrap-vue table td 元素样式

Posted

技术标签:

【中文标题】bootstrap-vue table td 元素样式【英文标题】:bootstrap-vue table td element styling 【发布时间】:2019-05-13 14:47:44 【问题描述】:

我给 b-table 元素的 <td> 标记赋予样式时遇到了问题。

这是模板:

    <b-table
      :fields="fields"
      :items="items"
      class="mx-1 mt-2"
      v-if="items && items.length > 0"
    >
      <template
        slot="email"
        slot-scope="row"
      >
        <div :title="row.item.email">
          <p class="user-email">row.item.email</p>
        </div>
      </template>
    </b-table>

这是字段:

    fields: [
       key: "email", label: "Email",
       key: "user", label: "Name" ,
       key: "role", label: "Role" 
    ],

我想给这张表的&lt;td&gt; 提供 300px 的最大宽度。 请帮忙!

【问题讨论】:

您是否尝试过通过 CSS 设置 max-width 是的,它没有响应 【参考方案1】:

您可以在字段对象内设置tdClass 属性。 但是tdClass 只接受字符串或数组,而不是对象。所以你只能引用一个css类。

fields: [
       key: "email", label: "Email", tdClass: 'nameOfTheClass',
       key: "user", label: "Name" , tdClass: 'nameOfTheClass',
       key: "role", label: "Role" , tdClass: 'nameOfTheClass'
]

在你的 CSS 中:

.nameOfTheClass 
   max-width: 300px;

【讨论】:

好的,我在这里再次尝试过,只是为了确保它有效:jsfiddle.net/yzjudf6b/1 通过使用检查器,您可以看到两个样式属性都分配给了 td 元素跨度> 如果它不适合你,也许你可以创建一个小sn-p? 我看到它适用于 JSFiddle。但它在我的机器上不起作用,对不起:/ 你使用的是最新版本的 bootstrap-vue 吗? 你的&lt;style&gt;标签有scoped属性吗?【参考方案2】:

在这里:https://bootstrap-vue.js.org/docs/components/table/ 你可以阅读: “class、thClass、tdClass 等不适用于在作用域 CSS 中定义的类”。 所以这可能是它不适合你的情况。 如果你想设置你的头的样式,你可以在你的字段对象中使用 thStyle 属性,即:


   key: 'test', label: 'Test', thStyle:  backgroundColor: '#3eef33'

希望这会有所帮助。

【讨论】:

【参考方案3】:

我设法让它为我工作的唯一方法是在桌子上使用 Vue 的 Deep Selector 并定位 td 标记。

<style lang="css" scoped>
/* ::v-deep/ .table > tbody > tr > td  */
/deep/ .table > tbody > tr > td 
max-width: 300px;

</style>

我希望这对那里的人有所帮助。!! ?

【讨论】:

以上是关于bootstrap-vue table td 元素样式的主要内容,如果未能解决你的问题,请参考以下文章

在table中tr和td 有啥区别

table布局, td内部元素溢出边界问题。 (已解决)

TD 不能嵌套在 TABLE 中

用table建立表单时,td元素下的提交按钮如何居中

table中绝对定位元素相对td定位失效解决方案

table中绝对定位元素相对td定位失效解决方案