Question

在制表器中，如何使列标题的水平对齐与列数据匹配，或者也许单独管理它们。一列居中的数据在标题左对齐的情况下看起来很奇怪。

我对此很陌生，但是我浏览了制表器信息页面，位桶页面，并在这里搜索。创建某些格式化程序功能似乎有些办法，但是对于这样的基本功能来说似乎很晦涩。

谢谢，山姆。

Answer 1

使用CSS

.tabulator-col-title {
  text-align: center;
}

<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" type="text/css" href="https://unpkg.com/tabulator-tables@4.2.4/dist/css/tabulator.min.css">

</head>

  <body>
    <div id="example-table"></div>



<script src="https://code.jquery.com/jquery-3.4.0.min.js"></script>
<script src="https://unpkg.com/tabulator-tables@4.2.4/dist/js/tabulator.min.js"></script>

  </body>

</html>

const tabledata1 = [{
    id: 1,
    name: "Oli ",
    money: "0",
    col: "red",
    dob: ""
  },
  {
    id: 2,
    name: "Mary ",
    money: "0",
    col: "blue",
    dob: "14/05/1982"
  },
  {
    id: 3,
    name: "Christine ",
    money: "0",
    col: "green",
    dob: "22/05/1982"
  },
  {
    id: 4,
    name: "Brendon ",
    money: "0",
    col: "orange",
    dob: "01/08/1980"
  },
  {
    id: 5,
    name: "Margret ",
    money: "0",
    col: "yellow",
    dob: "31/01/1999"
  },
];


const table = new Tabulator("#example-table", {
  height: 205, // set height of table (in CSS or here), this enables the Virtual DOM and improves render speed dramatically (can be any valid css height value)
  data: tabledata1, //assign data to table
  layout: "fitColumns", //fit columns to width of table (optional)
  columns: [ //Define Table Columns
    {
      title: "Name",
      field: "name",
      width: 150,
      align: "center"

    },
    {
      title: "money",
      field: "money",
      align: "left",
      formatter: "money",
      align: "center"

    },
    {
      title: "Favourite Color",
      field: "col",
      align: "center"

    },
    {
      title: "Date Of Birth",
      field: "dob",
      sorter: "date",
      align: "center"
    },
  ]
});

const setAlignment = function(index, alignment) {
  $($('.tabulator-col-title')[index - 1]).css("text-align", alignment);

}

.tabulator-col-title {
  text-align: center;
}

<script src="https://unpkg.com/tabulator-tables@4.2.4/dist/js/tabulator.min.js"></script>
<link href="https://unpkg.com/tabulator-tables@4.2.4/dist/css/tabulator.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!DOCTYPE html>
<html lang="en">

<body>
  <div id="example-table"></div>
  <button onClick="setAlignment(4,'right')">Set Alignment</button>
</body>

</html>

Answer 2

由dota2pro提供，.tabulator-col-title { text-align: center; }实现标头的批量对齐。并且为特定列提供的解决方案也可以使用。

Answer 3

在列定义中使用以下属性将标题分别居中（例如居中）：

title:'test',
field:'myfield',
titleFormatter: function(cell, formatterParams, onRendered) 
{cell.getElement().style.textAlign='center'; return ''+cell.getValue()}

（已通过Tabulator 4.5测试）

制表符列标题对齐

3 个答案: