首页 > 代码库 > 网页中表格指定宽度大小的制作
网页中表格指定宽度大小的制作
在网页制作中，往往会显示指定宽度的表格，可以采用Bootstrap中的网格来实现。Bootstrap 提供了一套响应式、移动设备优先的流式网格系统，随着屏幕或视口（viewport）尺寸的增加，系统会自动分为最多12列。下面是 Bootstrap 网格的基本结构：
1 <div class="container">2 <div class="row">3 <div class="col-*-*"></div>4 <div class="col-*-*"></div> 5 </div>6 <div class="row">...</div>7 </div>8 <div class="container">....
如果在表格中实现，方法如下：
1 <body> 2 <div class="container"> 3 <br> 4 <br> 5 <form name="input" action="/test" method="get" class="text-success text-center"> 6 Please Enter Plate: <input type="text" name="user"> 7 <input type="submit" value="Submit" class="text-success"> 8 </form> 9 <br>10 <br>11 <% for(var i = 0;i < TotalLength%10;i++){12 var orderindex = 0; 13 %>14 <table class="table table-bordered table-striped table-hover" width="30%">15 <thead>16 <tr>17 <th class="text-success text-center"><%= plateArrayView[i] %></th>18 <th class="text-center">时间</th>19 <th class="text-center">地点</th>20 </tr>21 </thead>22 </table>23 </div>
在下面的实例中，布局有两个列，第二列被分为两行四个盒子,为嵌套列：
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <title>Bootstrap 实例 - 嵌套列</title> 5 <link href="/bootstrap/css/bootstrap.min.css" rel="stylesheet"> 6 <script src="/scripts/jquery.min.js"></script> 7 <script src="/bootstrap/js/bootstrap.min.js"></script> 8 </head> 9 <body>10 11 <div class="container">12 13 <h1>Hello, world!</h1>14 15 <div class="row">16 17 <div class="col-md-3" style="background-color: #dedef8;box-shadow: 18 inset 1px -1px 1px #444, inset -1px 1px 1px #444;">19 <h4>第一列</h4>20 <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>21 </div>22 23 <div class="col-md-9" style="background-color: #dedef8;box-shadow: 24 inset 1px -1px 1px #444, inset -1px 1px 1px #444;">25 <h4>第二列 - 分为四个盒子</h4>26 <div class="row">27 <div class="col-md-6" style="background-color: #B18904;28 box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">29 <p>Consectetur art party Tonx culpa semiotics. Pinterest 30 assumenda minim organic quis.31 </p>32 </div>33 <div class="col-md-6" style="background-color: #B18904;34 box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">35 <p> sed do eiusmod tempor incididunt ut labore et dolore magna 36 aliqua. Ut enim ad minim veniam, quis nostrud exercitation 37 ullamco laboris nisi ut aliquip ex ea commodo consequat.38 </p>39 </div>40 </div>41 42 <div class="row">43 <div class="col-md-6" style="background-color: #B18904;44 box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">45 <p>quis nostrud exercitation ullamco laboris nisi ut 46 aliquip ex ea commodo consequat.47 </p>48 </div> 49 <div class="col-md-6" style="background-color: #B18904;50 box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">51 <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, 52 sed do eiusmod tempor incididunt ut labore et dolore magna 53 aliqua. Ut enim ad minim.</p>54 </div>55 </div>56 57 </div>58 59 </div>60 61 </div>62 63 </body>64 </html>
网页中表格指定宽度大小的制作
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。