CSS uses the autoflow attribute to achieve seat selection effect

1. Autoflow attribute, if the length and width of the element content exceeds the length and width of the element itself, a scroll bar will appear

<HTML> 
<HEAD> 
<TITLE>Testing the scroll bar in the table</TITLE> 
</HEAD> 
<BODY> 
<div id="wins" 
        style="position:absolute;height:200;width:200;overflow:auto;background:#EEEEEE;"> 
        <p>pppppppppppppppppppppppppppppppppppppppppppppppppppp </p> 
        <p>pppppppppppppppppppppppppppppppppppppppppppppppppppp </p> 
        <p>pppppppppppppppppppppppppp </p> 
        <p>pppppppppppppppppppppppppp </p> 
        <p>pppppppppppppppppppppppppp </p> 
        <p>pppppppppppppppppppppppppp </p> 
        <p>pppppppppppppppppppppppppp </p> 
        <p>pppppppppppppppppppppppppp </p> 
        <p>pppppppppppppppppppppppppp </p> 
        <p>pppppppppppppppppppppppppp </p> 
        <p>pppppppppppppppppppppppppp </p> 
        <p>pppppppppppppppppppppppppp </p> 
      </div>
</BODY> 
</HTML>

The effect is as follows

2. Seat selection page

<html>
<head>
 <meta charset="utf-8"> 
 <title>Seats</title>
 <meta name="viewport"
 content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
 <link rel="stylesheet" href="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/css/bootstrap.min.css">
 <script src="http://cdn.static.runoob.com/libs/jquery/2.1.1/jquery.min.js"></script>
 <script src="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/js/bootstrap.min.js"></script>
 <style type="text/css">
      table tr td{
        padding: 5px;
      }
     </style>
      </head>
   <script>
  function createTable(){
var DivW=600;
var DivH=400;
var length=30;
var height=$("#h").val()/1;
var width=$("#w").val()/1;
var TableW=width*(length+3);
var TableH=height*(length+3);
$(".main").empty();
$(".main").width(TableW).height(TableH);
for(var a=0;a<height+1;a++){
 var str="<tr>";
 for(var b=0;b<width+1;b++){
  if(a==0&&b>0){
   str+='<td height="30px" width="30px">'+b+'</td>';
  }
  if(b==0&&a>0){
     str+='<td height="30px" width="30px">'+a+'</td>';
  }
  if(b>0&&a>0){
   str+='<td height="30px" width="30px" ><img src="img/2.png" width="30px" height="30px" /></td>';
  }
  
  if(a==0&&b==0){
    str+='<td height="30px" width="30px"></td>';
  }
 }
 str+="</tr>";
 $(".main").append(str);
}
  }
   </script>
<body>
<!-- Button triggers the modal box-->
<button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal" onclick="createTable()">
 Seat</button>
<input type="text" id="h" />Row<input type="text" id="w" />Seat<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
 <div class="modal-dialog">
        <div class="modal-content">
   <div id="wins" style="position:absolute;height:400;width:600;overflow:auto;background:#ffffff;"> 
    <table class="main" style="text-align:center;">   
    </table>
   </div>
  </div>
 </div>
</div>
</body>
</html>

The effect is as follows

Summarize

The above is what I introduced to you. I use the autoflow attribute of CSS to achieve the seat selection effect. I hope it will be helpful to you. If you have any questions, please leave me a message and I will reply to you in time. I would also like to thank everyone for their support of the 123WORDPRESS.COM website!

<<: Detailed explanation of the use of router-view components in Vue

>>: W3C Tutorial (10): W3C XQuery Activities