如何在不拉伸整行的情况下将大量内容放入HTML表格单元格

这个问题我之前做项目时也碰到过！给你两个简单实用的方案，既能控制单元格高度不影响其他行布局，又能让用户轻松阅读全部内容：

方案一：纯CSS实现悬停滚动（最简单） #

不需要任何JS，靠CSS就能搞定，浏览器兼容性拉满：

1. 先给目标单元格加一个自定义类，比如 scrollable-cell：

<tr>
  <td class="scrollable-cell">
    - some information 1 - anotothe information 1 - some information 2 - ...
  </td>
  <td>...</td>
</tr>

2. 添加以下CSS样式：

.scrollable-cell {
  max-height: 60px; /* 可以根据你的表格行高调整这个值 */
  overflow: hidden; /* 默认隐藏超出部分 */
  position: relative;
}

.scrollable-cell:hover {
  overflow-y: auto; /* 悬停时显示垂直滚动条 */
  padding-right: 10px; /* 可选：避免内容和滚动条重叠 */
}

原理：平时单元格固定高度，超出内容隐藏；鼠标悬停时开启垂直滚动，用户可以手动拖动滚动条查看全部内容，离开后恢复隐藏状态，完全不影响其他行的布局。

方案二：JS实现自动滚动（更省心） #

如果你想让用户不用手动拖滚动条，悬停时自动滚动内容，可以用JS实现这个效果：

1. 同样先给单元格加类，比如 auto-scroll-cell：

<tr>
  <td class="auto-scroll-cell">
    - some information 1 - anotothe information 1 - some information 2 - ...
  </td>
  <td>...</td>
</tr>

2. 先设置基础CSS固定高度：

.auto-scroll-cell {
  max-height: 60px;
  overflow: hidden;
  position: relative;
}

3. 添加JS逻辑：

// 获取所有需要自动滚动的单元格
const scrollCells = document.querySelectorAll('.auto-scroll-cell');

scrollCells.forEach(cell => {
  let scrollTimer;
  
  // 鼠标进入时启动自动滚动
  cell.addEventListener('mouseenter', () => {
    // 先判断内容是否真的超出高度，没超出就不用滚动
    if (cell.scrollHeight <= cell.clientHeight) return;
    
    scrollTimer = setInterval(() => {
      cell.scrollTop += 1; // 控制滚动速度，值越大滚越快
      // 滚到底部后重置到顶部，实现循环滚动
      if (cell.scrollTop >= cell.scrollHeight - cell.clientHeight) {
        cell.scrollTop = 0;
      }
    }, 50); // 滚动间隔，毫秒数越小滚动越流畅
  });
  
  // 鼠标离开时停止滚动
  cell.addEventListener('mouseleave', () => {
    clearInterval(scrollTimer);
    cell.scrollTop = 0; // 可选：重置滚动位置到顶部
  });
  
  // 可选：支持用户手动拖动暂停自动滚动
  cell.addEventListener('mousedown', () => {
    clearInterval(scrollTimer);
  });
  
  // 鼠标松开后恢复自动滚动
  cell.addEventListener('mouseup', () => {
    if (cell.scrollHeight > cell.clientHeight) {
      scrollTimer = setInterval(() => {
        cell.scrollTop += 1;
        if (cell.scrollTop >= cell.scrollHeight - cell.clientHeight) {
          cell.scrollTop = 0;
        }
      }, 50);
    }
  });
});

小提示：你可以调整代码里的scrollTop += 1和50这两个值来控制滚动速度和流畅度，找到最适合你场景的参数。

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