js数据表页脚未对齐

Question

我在Bootstrap中使用JS Data Table，有时页眉和页脚的垂直线与正文不对齐：

这似乎仅在使用scrollY时发生。表格HTML如下所示：

<div class="table-responsive">
    <table id = "fieldListTable" class="table table-bordered table-hover table-striped" style="width: 100%">
        <thead>
           <tr>
               <th>Assessment ID</th>
               <th>Rating District</th>
               <th>Parish</th>
               <th>Electoral Division</th>
               <th>Land Grade</th>
               <th>Catchment ID</th>
               <th>Plan No.</th>
               <th>Parcel No.</th>
               <th>Part Field ID</th>
               <th>Rated Area (in hectares)</th>
               <th>Rated Area (in acres)</th>
               <th>Total Annual Value (£)</th>
           </tr>
        </thead>

        <tfoot>
            <tr>
               <th></th>
               <th></th>
               <th></th>
               <th></th>
               <th></th>
               <th></th>
               <th></th>
               <th></th>
               <th class = "text-right"><label>Total:</label></th>
               <th class = "text-right"><label class = "fieldTotalHectares"></label></th>
               <th class = "text-right"><label class = "fieldTotalAcres"></label></th>
               <th class = "text-right"><label class = "fieldTotalAv"></label></th>                    
           </tr>
        </tfoot>
        <tbody>
        </tbody>
    </table>
</div>

这是初始化表格的JS：

me.fieldListTable().DataTable({
    bDestroy: true,
    searching: false,
    paging: false,
    scrollCollapse: true,
    scrollY: "450px",
    order: [
      //order by:
      [0, "asc"], //Assessment ID
      [6, "asc"], //then Plan No.
      [7, "asc"], //then Parcel No.
      [8, "asc"] //then Part Field ID
    ],
    lengthMenu: [[-1, 10, 25, 50, 100], ["All", 10, 25, 50, 100]],
    data: data.fields,
    createdRow: function(row, data /*, index*/) {
      row.id = "fieldListTableRow-" + data.land_id;
    },
    columnDefs: [
      { targets: [9, 10, 11], className: "text-right" },
      { targets: [7, 8], className: "text-left" },
      { targets: [4, 5], visible: false },
      { targets: [0, 4, 5, 6], type: "string-number" }
    ],
    columns: [
      { data: "assessment_id" },
      { data: "rating_district_id" },
      { data: "parish_id" },
      { data: "electoral_division_id" },
      { data: "land_grade" },
      { data: "catchment_id" },
      { data: "plan_no" },
      { data: "field_no" },
      { data: "part_field_id" },
      { data: "hectares" },
      { data: "acres" },
      { data: "av_gbp" }
    ]
  });

我已经在寻找答案，但是似乎没有什么适合我的问题。这两个问题似乎是最接近的：

dataTable Headers Misaligned

Column misaligned using DataTable fixedColumns

但实际上不是同一个问题。