水平滚动表 - 右边缘消失的填充

Question

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

＆＃13;

＆＃13;

* {
  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;
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

为了清楚表格水平滚动，我在.table-wrapper的两侧使用了负边距，以便桌面靠近屏幕的右边缘（运行代码片段到看到它在行动）。然后我在.table-wrapper的两边填充，以便当您一直滚动到桌子的左边缘或右边缘时，再次有一个舒适的空间。

但是，虽然此填充在左边缘显示所需，但它不会显示在右边缘（因为.table-wrapper仅为屏幕宽度的100％）。这似乎是跨浏览器的情况。

是否存在仅限CSS的修补程序，以便当您向右滚动时，只有 表格的右边缘显示填充？

Answer 1

试试这个：

＆＃13;

＆＃13;

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;
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;