Bootstrap中jQuery DataTable部分<td>边框厚度不一致问题排查

问题现象 #

在Bootstrap环境中使用jQuery DataTable时，表格整体显示正常，但部分<td>元素的边框厚度明显大于其他单元格。

问题截图 #

用户提供的代码 #

<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/buttons/2.2.2/css/buttons.dataTables.min.css">

<table class="table">
  <thead>
    <tr>
      <th scope="col">#</th>
      <th scope="col">First</th>
      <th scope="col">Last</th>
      <th scope="col">Handle</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1</th>
      <td>Mark</td>
      <td>Otto</td>
      <td>@mdo</td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td>Jacob</td>
      <td>Thornton</td>
      <td>@fat</td>
    </tr>
</tbody>

</table

原因及解决方案 #

1. 缺失DataTables核心基础样式

仅引入按钮组件CSS，未加载DataTables核心适配Bootstrap的样式文件，导致Bootstrap默认表格样式与DataTables动态渲染样式冲突，出现边框叠加。

修复：
添加DataTables核心Bootstrap适配CSS，放在按钮CSS之前：

<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.13.4/css/dataTables.bootstrap5.min.css">
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/buttons/2.2.2/css/buttons.dataTables.min.css">

2. 表格标签未闭合

代码末尾的<table未正确闭合为</table>，标签不完整会导致浏览器渲染异常，引发样式错乱。

修复：
将最后一行修正为：

</table>

3. 自定义CSS强制统一边框（兜底方案）

若上述方法无效，可通过自定义CSS强制统一所有单元格边框样式：

.table.dataTable td, .table.dataTable th {
  border-width: 1px !important;
  border-style: solid !important;
  border-color: #dee2e6 !important; /* 匹配Bootstrap默认表格边框色 */
}

4. 确保完整引入必要脚本

DataTables依赖jQuery及自身脚本，需补充引入：

<script src="https://code.jquery.com/jquery-3.6.4.min.js"></script>
<script src="https://cdn.datatables.net/1.13.4/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/1.13.4/js/dataTables.bootstrap5.min.js"></script>
<script src="https://cdn.datatables.net/buttons/2.2.2/js/dataTables.buttons.min.js"></script>

内容的提问来源于stack exchange，提问作者Satheesh Kumar