今天在学习的时候,突然想到一个问题,就是电脑端表格很宽的时候,手机端表格拖动,整个页面都会被拖动,这样不太友好。
所以记录下解决办法
要实现手机端表格滑动而页面不动的效果,你可以使用 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
暂无评论内容