解决jQuery DataTable中Material Design Lite加载条溢出父容器问题

解决方案 #

问题根源是绝对定位的加载条没有正确的父容器参照，且缺少必要的边界约束。按以下方式修改：

1. 给加载条的直接父容器（.mdl-grid）添加相对定位，让加载条以该容器为定位边界：

.mdl-grid {
  position: relative;
}

2. 完善加载条的CSS样式，确保它完全覆盖父容器且不溢出：

.preloader {
  background-color: rgba(55, 55, 55, .5);
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  /* 可选：让加载文字居中显示 */
  display: flex;
  align-items: center;
  justify-content: center;
  color: #ffffff;
}

3. （可选）如果需要加载条仅覆盖表格区域，可将.preloader移动到表格所在的单元格内，并给该单元格添加position: relative：

<div class="mdl-cell mdl-cell--12-col mdl-cell--8-col-tablet mdl-cell--4-col-phone" style="min-height: 300px; margin-top: 10px; cursor:pointer; position: relative">
  <table id="tabela">
    <thead>
      <tr>
        <th>Id.</th>
        <th>Name</th>
        <th>Age</th>
        <th>Phone</th>
        <th>Actions</th>
      </tr>
    </thead>
  </table>
  <div class="preloader">
    Carregando...
  </div>
</div>

原理说明 #

• 当元素设置position: absolute时，会向上查找第一个设置了position: relative/absolute/fixed的父元素作为定位基准，若找不到则以浏览器视口为基准，这就是加载条溢出的原因。
• 使用top:0;left:0;right:0;bottom:0替代width:100%，可以让加载条自适应父容器的尺寸，避免溢出问题。

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