仅使用CSS的响应式表格滚动

Question

我创建了一个响应表，行为是，默认情况下，表将浮动到右侧，当滚动到左侧时，内容表将从左侧开始，但当表触及左边框时，右侧具有相同的填充。 / p>

在这种情况下，我无法向右边添加边距/填充。

注意：请确保以小于420像素查看它并且无法从主包装main-wrapper类中删除填充

以下是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

请检查小提琴：https://jsfiddle.net/mjke6o7a/

我已在本节更新了您的CSS

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

另外，您可以使用此方法（使用css边框），

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

Answer 2

我改变了一些你的代码，但我认为这是你想要实现的（在整页视图中打开它来检查溢出是如何工作的）：

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;