Data 1

Data 2

Data 3

```

接下来，通过CSS设置滚动效果。关键在于使用`overflow`属性和`position`属性来控制表格容器的行为：

```css

.scroll-table-container {

width: 100%;

height: 300px; /* 根据需要调整高度 */

overflow-x: auto;

overflow-y: hidden;

white-space: nowrap;

}

```

这段CSS代码确保了表格容器内的内容可以水平滚动，但不会垂直滚动，并且文本不会换行。

最后，为了确保用户体验，我们可以通过JavaScript添加一些交互性。例如，当用户尝试拖动滚动条时，可以自动调整表头的位置以保持对齐：

```javascript

document.querySelector('.scroll-table-container').addEventListener('scroll', function() {

const table = this.querySelector('table');

table.style.transform = `translateX(-${this.scrollLeft}px)`;

});

```

这段JavaScript代码监听容器的滚动事件，并相应地调整表格的位置，使其与容器保持对齐。

通过上述步骤，我们可以实现一个具有良好用户体验的表格内容滚动功能。这种方法不仅适用于网页设计中的静态表格展示，也可以应用于动态生成的数据展示场景。