如何让Horizontal Scrollable Table在容器内实现水平滚动且不超出容器？

问题说明 #

当前设置的水平滚动表格超出了容器范围，需要实现表格可水平滚动，但不会超出容器边界：

• 当前效果：表格整体超出黄色背景的main容器范围
• 期望效果：表格被限制在main容器内，横向超出部分通过滚动条查看，容器边界保持完整

现有代码 #

HTML代码 #

<body>
  <main>
    <h1>Table</h1>
    <table><thead><tr><th align="left">Table Heading 1</th><th align="left">Table Heading 2</th><th align="center">Center align</th><th align="right">Right align</th><th align="left">Table Heading 5</th></tr></thead><tbody><tr><td align="left">Item 1</td><td align="left">Item 2</td><td align="center">Item 3</td><td align="right">Item 4</td><td align="left">Item 5</td></tr><tr><td align="left">Item 1</td><td align="left">Item 2</td><td align="center">Item 3</td><td align="right">Item 4</td><td align="left">Item 5</td></tr><tr><td align="left">Item 1</td><td align="left">Item 2</td><td align="center">Item 3</td><td align="right">Item 4</td><td align="left">Item 5</td></tr><tr><td align="left">Item 1</td><td align="left">Item 2</td><td align="center">Item 3</td><td align="right">Item 4</td><td align="left">Item 5</td></tr><tr><td align="left">Item 1</td><td align="left">Item 2</td><td align="center">Item 3</td><td align="right">Item 4</td><td align="left">Item 5</td></tr></tbody></table>
  </main>
</body>

CSS代码 #

* {
  padding: 0;
  margin: 0;
}
main {
  padding: 25px;
  background-color: yellow;
}

table {
  border-collapse: collapse;
  white-space: nowrap;
}
th {
  padding: 10px;
  border: 1.5px solid rgba(0,0,0,0.275);
  background-color: rgba(0,0,0,0.107);
}
td {
  padding: 10px;
  border: 1.5px solid rgba(0,0,0,0.275);
}

解决方案 #

核心是给表格添加一个外层容器，通过容器的滚动属性限制表格范围：

1. 修改HTML结构 #

给<table>包裹一个带有类名的容器table-container：

<body>
  <main>
    <h1>Table</h1>
    <div class="table-container">
      <table><thead><tr><th align="left">Table Heading 1</th><th align="left">Table Heading 2</th><th align="center">Center align</th><th align="right">Right align</th><th align="left">Table Heading 5</th></tr></thead><tbody><tr><td align="left">Item 1</td><td align="left">Item 2</td><td align="center">Item 3</td><td align="right">Item 4</td><td align="left">Item 5</td></tr><tr><td align="left">Item 1</td><td align="left">Item 2</td><td align="center">Item 3</td><td align="right">Item 4</td><td align="left">Item 5</td></tr><tr><td align="left">Item 1</td><td align="left">Item 2</td><td align="center">Item 3</td><td align="right">Item 4</td><td align="left">Item 5</td></tr><tr><td align="left">Item 1</td><td align="left">Item 2</td><td align="center">Item 3</td><td align="right">Item 4</td><td align="left">Item 5</td></tr><tr><td align="left">Item 1</td><td align="left">Item 2</td><td align="center">Item 3</td><td align="right">Item 4</td><td align="left">Item 5</td></tr></tbody></table>
    </div>
  </main>
</body>

2. 添加容器CSS样式 #

在原有CSS中新增以下样式：

.table-container {
  width: 100%;
  overflow-x: auto;
}

效果说明 #

• 外层容器table-container宽度设为100%，会被main的padding限制在容器内部，不会超出边界
• overflow-x: auto会在表格宽度超过容器时自动显示水平滚动条，表格内容可通过滚动查看，整体不会超出main容器范围

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