水平滚动表-右边缘的填充消失 [英] Horizontal scrolling table - disappearing padding on right edge

问题描述

我想使用容器包装表格，以便它可以在移动屏幕上水平滚动:

I want to use a container to wrap a table so that it can scroll horizontally on mobile screens:

* {
  box-sizing: border-box;
}
body {
   padding: 10px;
   margin: 0px;
 }
.table-wrapper {
	width: calc(100% + 20px);
	overflow: auto;
	margin-left: -10px;
	margin-right: -10px;
	padding: 0 10px;
}
table caption {
   text-align: left;
   padding: 5px 5px;
   background: black;
   color: white;
}
table { /* for illustration purposes */
  width: 1000px;
  border: 1px solid black;
}

<div class="table-wrapper">
  <table>
    <caption>title of the table</caption>
    <thead>
      <tr>
        <td>Date</td>
        <td>Away</td>
        <td>Pts</td>
        <td>Home</td>
        <td>Pts</td>
        <td>Match</td>
      </tr>
    </thead>
  </table>
</div>

为了清楚地说明表格是水平滚动的，我在.table-wrapper的侧面上使用了负边距，以便表格紧贴屏幕的右边缘(运行代码段以查看实际效果) ).然后，我填充了.table-wrapper的侧面，以便当您一直滚动到桌子的左边缘或右边缘时再次有一个舒适的空间.

To make it clear that the table scrolls horizontally, I've used negative margins on the sides of the .table-wrapper so that the table butts up against the right edge of the screen (run the code snippet to see it in action). Then I've padded the sides of the .table-wrapper so that there's a comfortable space again when you've scrolled all the way to the left or right edge of the table.

但是，尽管该填充在左侧边缘上按需要显示，但不会在右侧边缘上显示(因为.table-wrapper仅是屏幕宽度的100％).跨浏览器似乎是这种情况.

However, while this padding manifests as desired on the left edge, it doesn't show up on the right edge (because the .table-wrapper is only 100% of the screen width). This seems to be the case across browsers.

是否有仅CSS的修复程序，所以当您一直滚动到右侧时，填充会出现在表格 only 的右边缘上?

Is there a CSS-only fix so that a padding appears on the right edge of the table only when you scroll all the way to the right?

推荐答案

尝试一下:

body {
  margin: 0;
}
.table-wrapper {
  overflow: auto;
  padding: 0 10px;
}
table {
  display: inline-table; /*key*/
  width: 1000px;
  border: 1px solid black;
}
table caption {
  text-align: left;
  padding: 5px 5px;
  background: black;
  color: white;
}

<div class="table-wrapper">
  <table>
    <caption>title of the table</caption>
    <thead>
      <tr>
        <td>Date</td>
        <td>Away</td>
        <td>Pts</td>
        <td>Home</td>
        <td>Pts</td>
        <td>Match</td>
      </tr>
    </thead>
  </table>
</div>

这篇关于水平滚动表-右边缘的填充消失的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！