仅用CSS实现响应式表格滚动的右侧内边距问题

我明白你遇到的困扰：在视口宽度小于420px时，你的响应式表格默认靠右显示，向左滚动到左边界后，右侧没法和左侧保持同等的内边距，而且还不能移除.main-wrapper的内边距。问题出在当前的容器和表格样式设置上，我们可以通过调整CSS来完美解决这个问题。

问题分析 #

原来的样式中，你通过给.responsive-table设置负margin来抵消main-wrapper的内边距，但表格本身的margin-left:30px和display:block设置，导致滚动时右侧没有预留出对应的空间，所以出现了内边距不一致的情况。

修改后的完整代码 #

CSS

.main-wrapper {
  width: 100%;
  box-sizing: border-box;
  border: 1px solid #ff0000;
  padding: 0 30px;
}

.responsive-table {
  margin: 0 -30px; /* 抵消main-wrapper的左右padding，让滚动容器延伸至视口边缘 */
  overflow-x: auto;
  padding: 0 30px; /* 给滚动容器内部添加左右padding，确保表格滚动时两侧都有内边距 */
  -webkit-overflow-scrolling: touch; /* 将触摸滚动属性移到滚动容器上，提升移动端体验 */
}

.responsive-table > table {
  min-width: 100%; /* 确保表格在内容较少时占满容器，内容过多时自动撑开宽度 */
  border-collapse: collapse;
}

.responsive-table > table td, th {
  border: 1px solid #cccccc;
  padding: 8px;
  font-family: Arial;
  font-size: 16px;
}

HTML（无需修改）

<div class="main-wrapper">
 <div class="responsive-table">
 <table class="table">
 <thead>
 <tr>
 <th scope="col">#</th>
 <th scope="col">First</th>
 <th scope="col">second</th>
 <th scope="col">third</th>
 <th>column</th>
 <th>column</th>
 <th>@column</th>
 </tr>
 </thead>
 <tbody>
 <tr>
 <th scope="row">1</th>
 <td>column</td>
 <td>column</td>
 <td>column</td>
 <td>column</td>
 <td>column</td>
 <td>@column</td>
 </tr>
 <tr>
 <th scope="row">2</th>
 <td>column</td>
 <td>column</td>
 <td>column</td>
 <td>column</td>
 <td>column</td>
 <td>@column</td>
 </tr>
 <tr>
 <th scope="row">3</th>
 <td>column</td>
 <td>column</td>
 <td>@column</td>
 <td>column</td>
 <td>column</td>
 <td>@column</td>
 </tr>
 </tbody>
 </table>
 </div>
 </div>

关键改动说明 #

1. 滚动容器添加内边距：给.responsive-table加上padding: 0 30px，这样不管表格滚动到哪个位置，左右两侧都会保持和main-wrapper一致的30px内边距。
2. 调整表格宽度属性：把表格的width:100%改成min-width:100%，并移除display:block和margin-left:30px。这样表格在内容不足时占满容器，内容过多时自动撑开宽度，触发滚动。
3. 优化触摸滚动体验：将-webkit-overflow-scrolling: touch移到滚动容器.responsive-table上，让触摸设备上的滚动更流畅自然。

现在在视口小于420px的场景下测试，滚动表格到左边界时，右侧会保留和左侧同等的内边距，同时main-wrapper的内边距也完全保留了。

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