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

enyaitl3 于 2022-12-24 发布在其他

关注(0)|答案(2)|浏览(155)

我已经创建了一个响应表和行为是，默认情况下，表将浮动到右边，当滚动到左边时，内容表将从左边开始，但当表接触左边界时，从右边填充相同的内容。
在这种情况下，我无法向右侧添加边距/填充。
注意：请确保以小于420像素查看它，并且不能从主 Package 器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>

css

来源：https://stackoverflow.com/questions/50618472/responsive-table-scroll-with-css-only

2条答案

按热度按时间

mbskvtky1#

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

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

赞(0）回复(0）举报 2022-12-24

tv6aics12#

请检查Fiddle：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/

赞(0）回复(0）举报 2022-12-24

我来回答

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

2条答案

相关问题

热门标签

最新问答