Datatables库用于动态生成包含分页和搜索功能的表.我使用CSS自定义了分页编号,但是对齐似乎不在网格中.

.dataTables_paginate a {
    color: black;
    float: left;
    padding: 8px 16px;
    text-decoration: none;
    transition: background-color .3s;
}

.dataTables_paginate a.active {
    background-color: #4CAF50;
    color: white;
}

.dataTables_paginate a:hover:not(.active) {background-color: #ddd;}

分页未与网格对齐.

Datatable EJS

<h2><% var projectlist = JSON.parse(data); %></h2>
<table id="example" class="table table-striped table-bordered dataTable" cellspacing="0" width="100%">
  <thead>
    <tr>
      <th scope="col">#</th>
      <th scope="col">CSI ID</th>
      <th scope="col">App Name</th>
      <th scope="col">Status</th>
    </tr>
  </thead>
  <tbody>
     <!-- get projects array from the data property -->
<% var counter = 0; %>
<% var evale = 'CSI:'; %>

<% for (var key in projectlist) { %>

  <% if (projectlist.hasOwnProperty(key)) { %>
    <% var csiid = projectlist[key].name.substring(projectlist[key].name.lastIndexOf(":")+1,projectlist[key].name.lastIndexOf("]")); %>
    <% if (projectlist[key].name.match(evale)) { %>
    <% counter = counter + 1; %>
    <tr>
    <td><%= counter %></td>
    <td><%= csiid %></td>
    <td><%= projectlist[key].name.replace(/\[.*?\]\s?/g,'') %></td>
     <td>TESTED</td>
    </tr>
  <% } %>
  <% } %>
   <% } %>


  </tbody>
</table>

由datatables.js生成的Paginate运行时HTML

<div class="dataTables_paginate paging_simple_numbers" id="example_paginate">
    <a class="paginate_button prevIoUs disabled" aria-controls="example" data-dt-idx="0" tabindex="0" id="example_prevIoUs">PrevIoUs</a>
    <span>
        <a class="paginate_button current" aria-controls="example" data-dt-idx="1" tabindex="0">1</a>
        <a class="paginate_button " aria-controls="example" data-dt-idx="2" tabindex="0">2</a>
        <a class="paginate_button " aria-controls="example" data-dt-idx="3" tabindex="0">3</a>
        <a class="paginate_button " aria-controls="example" data-dt-idx="4" tabindex="0">4</a>
        <a class="paginate_button " aria-controls="example" data-dt-idx="5" tabindex="0">5</a>
        <span class="ellipsis">…</span>
        <a class="paginate_button " aria-controls="example" data-dt-idx="6" tabindex="0">33</a>
    </span>
    <a class="paginate_button next" aria-controls="example" data-dt-idx="7" tabindex="0" id="example_next">Next</a>
</div>