如何使用CSS为表格第三列实现Marquee（跑马灯）效果？

好问题！现在<marquee>标签已经被W3C废弃了，用CSS动画来实现滚动效果是更标准、可控的方案。我给你整理了一个完整的实现方案，附带详细解释：

完整代码示例 #

<table border="1">
  <tr>
    <td>Column1 Static</td>
    <td>Column2 Static</td>
    <td class="scroll-column">
      <span class="scroll-content">Column3 with some long moving text that needs to scroll horizontally</span>
    </td>
  </tr>
</table>

<style>
/* 目标列的容器样式 */
.scroll-column {
  width: 200px; /* 固定列宽，根据需求调整 */
  overflow: hidden; /* 隐藏溢出的内容 */
  white-space: nowrap; /* 强制文本不换行 */
}

/* 滚动内容的样式 */
.scroll-content {
  display: inline-block; /* 让元素宽度等于文本实际宽度 */
  animation: scroll 10s linear infinite; /* 应用动画：时长10秒，线性速度，无限循环 */
}

/* 定义滚动动画 */
@keyframes scroll {
  0% {
    transform: translateX(100%); /* 初始位置：从容器右侧外开始 */
  }
  100% {
    transform: translateX(-100%); /* 结束位置：滚动到容器左侧外 */
  }
}

/* 可选：鼠标悬停时暂停滚动，提升体验 */
.scroll-column:hover .scroll-content {
  animation-play-state: paused;
}
</style>

关键部分解释 #

• 给目标列加类名：给第三列的<td>添加scroll-column类，方便精准选中目标元素；同时用<span>包裹文本，避免直接操作表格单元格导致布局混乱。
• 容器样式设置：
  • width: 200px：固定列的显示宽度，你可以根据实际需求调整数值，或者用百分比做适配。
  • overflow: hidden：隐藏超出容器宽度的文本，只保留可视区域内的内容。
  • white-space: nowrap：强制文本保持一行不换行，确保滚动是横向的。
• 滚动动画实现：
  • @keyframes scroll：定义动画的起始和结束状态，通过transform: translateX()实现横向位移。初始位置设为100%（文本从容器右侧外进入），结束位置设为-100%（文本完全滚动到容器左侧外），形成循环滚动效果。
  • animation属性：控制动画时长（10s）、速度曲线（linear匀速）和循环次数（infinite无限循环），你可以根据文本长度调整时长，让滚动速度更舒适。
• 悬停暂停优化：添加hover状态下的animation-play-state: paused，让用户能通过鼠标悬停暂停滚动，方便阅读长文本。

注意事项 #

如果文本长度小于容器宽度，滚动效果不会触发——这是合理的，毕竟只有内容超出容器时才需要滚动。如果需要强制滚动（哪怕文本短），可以给.scroll-content添加padding-right: 100%，让文本“拉长”，确保能触发滚动逻辑。

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