Адаптивная прокрутка таблиц только с CSS

Question

Я создал адаптивную таблицу, и поведение таково, что по умолчанию таблица будет смещена вправо, а при прокрутке влево таблица содержимого будет начинаться слева, но будет иметь тот же отступ справа, когда таблица касается левой границы.

Я не могу добавить поле / отступ справа в этом случае.

ПРИМЕЧАНИЕ: пожалуйста, убедитесь, что просматриваете его менее чем в 420 пикселях и не можете удалить отступы из основной оболочки main-wrapper class

Вот JSFiddle

.main-wrapper{
  width:100%;
  box-sizing:border-box;
  border:1px solid #ff0000;
  padding:0 30px;
}
.responsive-table{
  margin-right:-30px;
  margin-left:-30px;
  overflow-x:auto;
}
.responsive-table > table{
  width: 100%;
  border-collapse: collapse;
  display: block;
  -webkit-overflow-scrolling: touch;
  margin-left:30px;
  }
  .responsive-table > table td, th {
    border: 1px solid #cccccc;
    padding: 8px;
    font-family: Arial;
    font-size: 16px;
  }

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

Answer 1

Я немного изменил ваш код, но я думаю, что это то, чего вы хотите достичь (откройте его в режиме полного просмотра страницы, чтобы проверить, как работает переполнение):

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

.responsive-table{
  display: inline-block;
  min-width: 100%;
  box-sizing: border-box;
}

.responsive-table > table {
  width: 100%;
  border-collapse: collapse;
}

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

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

Answer 2

Пожалуйста, проверьте скрипку: https://jsfiddle.net/mjke6o7a/

Я обновил ваш CSS в этом разделе

.responsive-table > table {
  width: 100%;
  border-collapse: collapse;
  -webkit-overflow-scrolling: touch;
  }
.responsive-table {
  overflow-x:auto;
}

В других случаях вы можете использовать этот метод (используя css border),

.responsive-table > table {
      background-color: #fff;
      box-shadow: inset 0 0 0 1px #ccc;
  /* And so on and so forth, if you want border-ception */
      margin: 0 auto;
      position: relative;
      border: 30px solid #fff;
      border-top: 0px;
      border-bottom: 0px;
    }

Скрипка: https://jsfiddle.net/ny5jxa44/