你能根据屏幕尺寸做html表格分页吗？如果是这样的话？

Question

例如，我有30个问题要求它在笔记本电脑上显示3页，但在移动设备上可以显示10个问题吗？有一个下一个按钮的课程

Answer 1

您可以阅读浏览器宽度并考虑类似600的阈值来定义移动或桌面使用情况。 将此解决方案视为使用jQuery的客户端分页：

＆＃13;

＆＃13;

var current_width = $(window).width();
if(current_width<600) pageSize = 3;
if(current_width>600) pageSize = 10;

showPage = function(page) {
    $(".question").hide();
    $(".question").each(function(n) {
        if (n >= pageSize * (page - 1) && n < pageSize * page)
            $(this).show();
    });        
}
    
showPage(1);

$("#pagination a").click(function() {
    $("#pagination a").removeClass("current");
    $(this).addClass("current");
    showPage(parseInt($(this).text())) 
});

＆＃13;

.question {
  margin: 5px 0;
  padding: 5px;
  box-sizing: border-box;
  width: 100%;
  height: 100px;
  border: 1px solid #565656;
  background-color: #efefef;
}

#pagination {
  list-style: none;
  width:200px;
  margin:10px auto;
}
#pagination li {
  float:left;
  margin-right:10px;
}
#pagination a {
  display:block;
  color:#787878;
  padding:5px 8px;
  border-radius:3px;
  background:#f9f9f9;
}
#pagination a.current {
  color:white;
  background:#8989ff;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<div class=""questions">
  <div class="question">1 I have some first question</div>
  <div class="question">2 I have some second question</div>
  <div class="question">3 I have some third question</div>
  <div class="question">4 I have some forth question</div>
  <div class="question">5 I have some fifth question</div>
  <div class="question">6 I have some sixth question</div>
  <div class="question">7 I have some seventh question</div>
  <div class="question">8 I have some eighth question</div>
  <div class="question">9 I have some ninth question</div>
  <div class="question">10 I have some tenth question</div>
  <div class="question">11 I have some eleventh question</div>
  <div class="question">12 I have some twelveth question</div>
</div>
<ul id="pagination">
  <li><a class="current" href="#">1</a></li>
  <li><a href="#">2</a></li>
  <li><a href="#">3</a></li>
  <li><a href="#">4</a></li>
</ul>

＆＃13;

＆＃13;

＆＃13;