Determine which way you choose to render the data table

(1) The automatic rendering mode, i.e. code form, is adopted as follows:

<table id="workTicketFinishTable" class="layui-table"
       lay-data="{url:'/handleWorkTicketFinishTableData'}"
       lay-filter="workTicketFinishTableEvent">
    <thead>
    <tr>
        <th lay-data="{field:'numberOfGroundLineDone', width:'20%',event:'setNumberOfGroundLineDone',style:'cursor:pointer;'}">
            Ground wire No. removed
        </th>
        <th lay-data="{field:'numberOfGroundKnifeGateDone', width:'20%', event: 'setNumberOfGroundKnifeGateDone', style:'cursor: pointer;'}">
            No. of opened grounding switch
        </th>
        <th lay-data="{field:'numberOfGroundLineNotDone', width:'20%',event:'setNumberOfGroundLineNotDone',style:'cursor:pointer;'}">
            No. of earth wire not removed
        </th>
        <th lay-data="{field:'numberOfGroundKnifeGateNotDone', width:'20%', event: 'setNumberOfGroundKnifeGateNotDone', style:'cursor: pointer;'}">
            No. of grounding switch not opened
        </th>
        <th lay-data="{field:'workTicketFinishPermiterSign', width:'10%', event: 'setWorkFinishPermiterSign', style:'cursor: pointer;'}">
            Signature of work permit
        </th>
        <th lay-data="{field:'workTicketFinishPermiterSignDate', width:'10%', event: 'setWorkFinishPermiterSign', style:'cursor: pointer;'}">
           Signature time
        </th>
    </tr>
    </thead>
</table>

At this time, you can center the header content in the css file. The content of a new css file is as follows

/*Set data table header font*/
.layui-table th{
    /*Center header content*/
    text-align: center;
}

(2) If you use the method of rendering, the code form is as follows:

var table = layui.table;
 
//Execution rendering
table.render({
  elem: '#demo' //Specify the original table element selector (recommended id selector)
  ,height: 315 //Vessel height
  ,cols: [{}] //Set the header
  //... //Refer to the table of contents on the right for more parameters: basic parameter options
});

At this time, you can not only use the above methods, but also use the following methods:

layui.use('table', function () {
        var table = layui.table;
 
        table.render({
            elem: '#desTable'
            , url: '${ctx}/alarm/queryEventShowScatter'
            , even: true
            , page: { //Supports all parameters passed in to the laypage component (except some parameters, such as: jump/elem) - see documentation for details
                layout: ['limit', 'count', 'prev', 'page', 'next', 'skip'] //Custom paging layout
                //, curr: 5 / / the setting is initially on page 5
                , groups: 1 //Show only 1 consecutive page number
                , first: false //Do not show first page
                , last: false //Don't show end page
 
            }
            , cols: [[
                {field: 'id', align:'right',width: '15%', title: '1', style: 'background-color: #5FB878; color: #fff'}
                , {field: 'srcip', width: '15%', title: '2', style: 'background-color: #5FB878; color: #fff'}
                , {field: 'logtime', width: '20%', title: '3', style: 'background-color: #5FB878; color: #fff'}
                , {field: 'lasttime', width: '20%', title: '4', style: 'background-color: #5FB878; color: #fff'}
                , {field: 'count', width: '15%', title: '5', style: 'background-color: #5FB878; color: #fff'}
                , {field: 'percent', width: '15%', title: '6', style: 'background-color: #5FB878; color: #fff'}
            ]],
            done: function (res, curr, count) {
                $('tr').css({'background-color': '#009688', 'color': '#fff'});
            }
 
        });
    });

{field: 'id', align: 'right', width: '15%', title: '1', style: 'background color:' 5fb878; color: 'FFF'}, this header can be centered, so you only need to add this sentence: align: 'right'

This method is used for individual setting, and the first method is better for global setting.