CSS表格溢出处理：设置left:0并实现单元格循环滚动效果

先搞定溢出和基础定位 #

首先给页面和表格添加基础样式，解决溢出问题，同时固定表格初始在左侧位置：

body {
  margin: 0;
  overflow: hidden; /* 窗口外的内容直接隐藏，避免出现滚动条 */
}

table {
  position: relative;
  left: 0; /* 表格初始状态贴紧左侧 */
  border-collapse: collapse; /* 消除单元格之间的缝隙 */
}

调整单元格的动画逻辑 #

原来的动画会让所有单元格一起移出窗口，复位时也很突兀。现在修改动画逻辑，让每个单元格移动到自身右边缘对齐窗口右边缘后，平滑回到起点重新移动：

td {
  height: 6vh;
  width: 20vw;
  background-color: red;
  animation: flow 5s infinite linear; /* 匀速循环动画 */
}

/* 给每个单元格设置递增的动画延迟，实现依次触发循环的效果 */
.T1 { animation-delay: 0s; }
.T2 { animation-delay: 0.5s; }
.T3 { animation-delay: 1s; }
.T4 { animation-delay: 1.5s; }
.T5 { animation-delay: 2s; }
.T6 { animation-delay: 2.5s; }
.T7 { animation-delay: 3s; }
.T8 { animation-delay: 3.5s; }
.T9 { animation-delay: 4s; }
.T10 { animation-delay: 4.5s; }

@keyframes flow {
  0% {
    transform: translateX(0); /* 初始位置 */
  }
  90% {
    /* 计算目标位置：窗口宽度减去单元格自身宽度，确保右边缘对齐窗口右侧 */
    transform: translateX(calc(100vw - 20vw));
  }
  95% {
    transform: translateX(calc(100vw + 10px)); /* 稍微移出窗口，避免复位时的突兀感 */
  }
  100% {
    transform: translateX(0); /* 快速回到起点，开启下一轮循环 */
  }
}

HTML结构保持不变 #

<table>
<tr>
  <td class="T1"> </td>
  <td class="T2"></td>
  <td class="T3"></td>
  <td class="T4"></td>
  <td class="T5"></td>
  <td class="T6"></td>
  <td class="T7"></td>
  <td class="T8"></td>
  <td class="T9"></td>
  <td class="T10"></td>
</tr>
</table>

关键细节说明 #

• overflow: hidden：彻底隐藏窗口外的内容，解决溢出导致的滚动条问题。
• 动画延迟：每个单元格延迟递增0.5秒，让它们依次到达窗口末端并复位，完全匹配你描述的“T10、T9等逐个循环”的需求。
• 精准定位：用calc(100vw - 20vw)计算移动目标，确保单元格刚好停在窗口末端位置。
• 线性动画：linear参数保证移动速度均匀，不会出现快慢变化。

内容的提问来源于stack exchange，提问作者Mr. kismat