如何实现手机端表格左右拖动，而页面不动-漫步白月光abc

今天在学习的时候，突然想到一个问题，就是电脑端表格很宽的时候，手机端表格拖动，整个页面都会被拖动，这样不太友好。

所以记录下解决办法

要实现手机端表格滑动而页面不动的效果，你可以使用 CSS 的 overflow 属性来控制页面的滚动行为。具体来说，你可以将表格所在的容器设置为 overflow: auto;，这样当表格内容超出容器大小时，用户可以滚动查看表格内容，而页面其他部分保持静止不动。

<!DOCTYPE html>  
<html>  
<head>  
  <style>  
    .container {  
      width: 100%;  
      overflow: auto;  
    }  
    .table {  
      width: 100%;  
      border-collapse: collapse;  
    }  
    .table td {  
      border: 1px solid #ddd;  
      padding: 8px;  
    }  
  </style>  
</head>  
<body>  
  <div class="container">  
    <table class="table">  
      <tr>  
        <td>单元格1</td>  
        <td>单元格2</td>  
        <td>单元格3</td>  
        <!-- 其他单元格 -->  
      </tr>  
      <!-- 其他行 -->  
    </table>  
  </div>  
</body>  
</html>

在上面的示例中，.container 类定义了一个容器，用于包含表格内容。通过设置 overflow: auto;，当表格内容超出容器大小时，用户可以滚动查看表格内容，而页面其他部分保持静止不动。.table 类用于设置表格的样式，包括边框和单元格的填充等。你可以根据需要调整样式来满足你的需求。

文章版权归作者所有，未经允许请勿转载。

THE END