仅具有CSS的响应式表格滚动

Question

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

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

注意:请确保查看的像素小于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

我稍微修改了你的代码，但我认为这就是你想要实现的(在全页视图中打开它以检查overflow是如何工作的)：

​

.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边框)，

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