如何使用HTML和CSS让表格行内的加载Spinner在整行居中

问题根源是你的.loading容器没有占满合并后单元格的全部宽度，再加上td默认的text-align: left，导致Spinner仅在局部区域居中。只需调整以下两点即可解决：

调整方案（Flex布局方式） #

给.loading类添加width: 100%，确保flex容器填满跨列后的整个单元格宽度；同时可以设置固定高度让Spinner在垂直方向有足够空间居中：

.loading {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100px; /* 可选，优化垂直方向的居中效果 */
  width: 100%;
}

简化方案（非Flex布局） #

如果不需要flex布局，也可以直接通过单元格对齐实现：

.loading {
  text-align: center;
  padding: 40px 0; /* 上下内边距实现垂直居中 */
}

修改后的完整代码示例（Flex版） #

CSS代码 #

.table {
  width: 100%;
  border-collapse: collapse;
}

th,
td {
  padding: 8px;
  text-align: left;
  border: 1px solid #ccc;
}

th {
  background-color: #f2f2f2;
  font-weight: bold;
  cursor: pointer;
}

.loading {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100px;
  width: 100%;
}

.loading .spinner {
  border: 4px solid #f3f3f3;
  border-top: 4px solid #3498db;
  border-radius: 50%;
  width: 30px;
  height: 30px;
  animation: spin 2s linear infinite;
}

@keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

HTML代码 #

<table class="table">
  <thead>
    <tr>
      <th>Header 1</th>
      <th>Header 2</th>
      <th>Header 3</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td colspan="3" class="loading">
        <div class="spinner"></div>
      </td>
    </tr>
  </tbody>
</table>

内容的提问来源于stack exchange，提问作者TAHER El Mehdi