数据表居中对齐

Question

我在页面上有一个表格，并使用数据表检索和显示内容。但列未与中心对齐。这就是现在的样子。 点击这里 。这就是我创建表格的方式

$(document).ready(function() {
manageMemberTable = $("#manageMemberTable").DataTable({


    "ajax": "php_actionsms/retrieve.php",
    "order": [[0,'desc']]
});

HTML代码：

<div class="container">
    <div class="row">
        <div class="col-md-12">

            <center><h1 class="page-header">TMTRO Iloilo <small>Accident Report Records</small> </h1></center>

            <div class="removeMessages"></div>
            <br /> <br /> <br />

            <table class="table table-responsive " id="manageMemberTable">                  
                <thead>
                    <tr>
                        <th>ID</th>
                        <th>Recipient</th>
                        <th>Recipient Number</th>
                        <th>Place</th>
                        <th>Officer</th>
                        <th>Date&Time</th>                                              
                        <th>Sent to Icer</th>
                        <th>Option</th>
                    </tr>
                </thead>
            </table>
        </div>
    </div>
</div>

Answer 1

定义数据表时添加：

"columnDefs": [
    {"className": "dt-center", "targets": "_all"}
]

将其添加到您的 CSS 中：

 th.dt-center, td.dt-center { text-align: center; }

Answer 2

为垂直居中对齐创建columnDefs css样式

manageMemberTable = $("#manageMemberTable").DataTable({
     ajax: "php_actionsms/retrieve.php",
     order: [[0, 'desc']],
     columnDefs: [{
         targets: '_all',
         createdCell: function(cell) {
           $(cell).css('vertical-align', 'middle');
         }
     }],
});

或者你可以使用像这样的CSS样式

table.dataTable>tbody>tr>td {
    vertical-align: middle;
}

如果您还想添加水平居中的表格单元格，请添加此 css 样式

table.dataTable>tbody>tr>td {
    text-align:center;
}

像这样在数据表中添加columnDefs

columnDefs: [{
         targets: '_all',
         createdCell: function(cell) {
           $(cell).css('vertical-align', 'middle');
           $(cell).css('text-align', 'center');
         }
     }],