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