如何在自动列生成中创建垂直列标题?

时间:2019-04-27 11:09:46

标签: laravel tabulator

如何在 tabulator js库中的自动列生成上创建垂直列标题

我这样做了,而且效果很好:

    //define data
    var tabledata = {!!$one!!}

    //define table
    var table = new Tabulator("#table-1", {
        data:tabledata,
        autoColumns:true,
        layout:"fitColumns",
    });

但是,当我添加“ headerVertical:true”时,它没有做任何更改:

    //define data
    var tabledata = {!!$one!!}

    //define table
    var table = new Tabulator("#table-1", {
        data:tabledata,
        autoColumns:true,
        headerVertical:true,
        layout:"fitColumns",
    });

在列自动生成时,有人可以帮助我制作垂直列标题吗?

1 个答案:

答案 0 :(得分:1)

headerVertical仅在根据documentation定义列时有效,无论如何您都可以使用简单的CSS来实现 https://jsfiddle.net/dota2pro/t0gw9jbp/5/

使用CSS rotate

旋转180度
   .tabulator-col-title {
  -webkit-writing-mode: vertical-rl;
  -ms-writing-mode: tb-rl;
  writing-mode: vertical-rl;
  text-orientation: mixed;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-align: center;
  align-items: center;
  -ms-flex-pack: center;
  justify-content: center;
  padding-top: 20px;
  /* if you use rotate change this to paddig-bottom*/
  transform: rotate(180deg);
  /* incase of rotation*/
}