20.table表格的应用

最新推荐文章于 2021-05-30 10:47:59 发布

weixin_30278237

最新推荐文章于 2021-05-30 10:47:59 发布

阅读量89

点赞数

原文链接：http://www.cnblogs.com/stone5/p/9117256.html

版权

要求：动态循环加载内容部分

基本知识点：

　　　　　　常用： table{宽，高一般不设置动态加载方便}

table td tr{border :1px solid red} 根据需求

border-collapse:collapse; 表格设置合并边框模型，不然border宽度不一样

colspan=“” 横向合并（合并列）不需要加style,直接写在td里

rowspan="" 纵向合并（合并行）

 
    <table > 
   
      <thead> 
   
        <tr> 
   
          <th>姓名</th> 
   
          <th>年龄</th> 
   
        </tr> 
   
      </thead> 
   
      <tbody> 
   
        <tr> 
   
          <td>January</td> 
   
          <td>100</td> 
   
        </tr> 
   
      </tbody> 
   
    </table>

　　　　　　　　table{} 只设置宽度不要设置高度最好；不然动态加载内容会乱

 
   <!DOCTYPE html> 
  
   <html lang="en"> 
  
   <head> 
  
       <meta charset="UTF-8"> 
  
       <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
  
       <meta http-equiv="X-UA-Compatible" content="ie=edge"> 
  
       <title>Document</title> 
  
       <style> 
  
           body{ 
  
               font-size:18px; 
  
               font-family:"雅黑"; 
  
           } 
  
           table,tr,td{ 
  
               border:2px solid #000; 
  
           } 
  
           table{ 
  
               margin:0 auto; 
  
               text-align:center; 
  
               border-collapse: collapse;  /*表格设置合并边框模型：*/
 
               width:720px;    
  
           } 
  
           tr{ 
  
               width:720px; 
  
               height:50px; 
  
           } 
  
           td{ 
  
               width:120px; 
  
           } 
  
           .text-dir{ 
  
               text-align:left; 
  
               text-indent:10px; 
  
           } 
  
       </style> 
  
   </head> 
  
   <body> 
  
       <table> 
  
           <tr> 
  
               <td colspan="5">高压设备三维工艺系统负荷度评测报告</td> 
  
               <td >85.3</td> 
  
           </tr> 
  
           <tr> 
  
               <td colspan="6">网络环境建设要求</td> 
  
           </tr> 
  
           <tr> 
  
               <td>评测内容</td> 
  
               <td colspan="5" class="text-dir"></td> 
  
           </tr> 
  
           <tr> 
  
               <td>评测要求</td> 
  
               <td colspan="5" class="text-dir"></td> 
  
           </tr> 
  
           <tr> 
  
               <td>打分数值</td> 
  
               <td></td> 
  
               <td>权重数值</td> 
  
               <td></td> 
  
               <td>评测数值</td> 
  
               <td></td> 
  
           </tr>  
  
           <tr> 
  
               <td>评测结论</td> 
  
               <td colspan="5" class="text-dir"></td> 
  
           </tr> 
  
       </table> 
  
   </body> 
  
   </html>

   01.发现问题 
 

   td调整宽度问题 
 

转载于:https://www.cnblogs.com/stone5/p/9117256.html

weixin_30278237

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
20.table表格的应用

要求：动态循环加载内容部分基本知识点：　　　　　　常用： table{宽，高一般不设置动态加载方便} table td tr{border :1px solid red} 根据需求 border-collapse:collapse; 表...
复制链接

扫一扫