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: To make it clear that the table scrolls horizontally, I've used negative margins on

Solution 1:

Try this:

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

<divclass="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>