【问题标题】:Tabulator - Using multiple table themes on the same page制表符 - 在同一页面上使用多个表格主题
【发布时间】:2020-12-04 14:41:36
【问题描述】:

我可以看到您可以从它声明的文档中为制表符设置主题

“要使用其中之一,只需包含匹配的 CSS 文件而不是默认的 tabulator.css”

如果我想要 3 张桌子,每张桌子都有不同的主题,会发生什么?

我可以看到这是可能的,因为 documentation page 可以做到,但我不知道怎么做。任何指导将不胜感激

【问题讨论】:

    标签: tabulator


    【解决方案1】:

    这是不可能开箱即用的,因为每个主题的 CSS 对表格元素使用相同的 CSS 选择器,因此它们都会努力为每个表格设置样式。

    我也会质疑为什么这是必要的,一般来说,将多个主题的表格放在同一页面上会给您的用户带来相当不和谐的体验,我不推荐这样做。

    话虽如此,示例页面通过更新每个主题的样式表来查找特定的表 id 而不是通用的.tabulator 选择器来实现这一点。

    所以样式表中引用.tabulator 的任何地方:

    .tabulator .tabulator-header.tabulator-header-hidden {
    

    变成例如:

    #bulma-theme-table .tabulator-header.tabulator-header-hidden {
    

    您还需要稍后在样式表中添加通用选择器的前缀,例如:

    .tabulator-row.tabulator-moving {
    

    会变成:

    #bulma-theme-table .tabulator-row.tabulator-moving {
    

    【讨论】:

    • 感谢您的回复,完美回答了我的问题。作为未来的增强功能,将表格样式设置为表格的属性可能是一个想法(也许它将样式名称附加到元素?虽然听起来我的用例可能有点不寻常
    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2017-05-18
    • 1970-01-01
    相关资源
    最近更新 更多