table表格单元格横向和属性合并代码实例

最新推荐文章于 2022-11-22 19:46:41 发布
最新推荐文章于 2022-11-22 19:46:41 发布
阅读量1.2k 收藏 1
点赞数
文章标签： c# 前端 matlab ViewUI
原文链接：https://yq.aliyun.com/articles/573387
版权
利用单元格可以能够有效的组织数据，如果能够灵活熟练的利用，则对于组织清晰明了的数据有着重要意义，下面是一段表格布局的代码实例，它实现了横向和纵向的单元格合并效果。

代码如下:

 
 
 
  
 
   
 
    
 
        

          01 
        
 
        

          02 
        
 
        

          03 
        
 
        

          04 
        
 
        

          05 
        
 
        

          06 
        
 
        

          07 
        
 
        

          08 
        
 
        

          09 
        
 
        

          10 
        
 
        

          11 
        
 
        

          12 
        
 
        

          13 
        
 
        

          14 
        
 
        

          15 
        
 
        

          16 
        
 
        

          17 
        
 
        

          18 
        
 
        

          19 
        
 
        

          20 
        
 
        

          21 
        
 
        

          22 
        
 
        

          23 
        
 
        

          24 
        
 
        

          25 
        
 
        

          26 
        
 
        

          27 
        
 
        

          28 
        
 
        

          29 
        
 
        

          30 
        
 
        

          31 
        
 
        

          32 
        
 
        

          33 
        
 
        

          34 
        
 
        

          35 
        
 
        

          36 
        
 
        

          37 
        
 
        

          38 
        
 
        

          39 
        
 
        

          40 
        
 
        

          41 
        
 
        

          42 
        
 
        

          43 
        
 
        

          44 
        
 
        

          45 
        
 		 
        
 
         
 
          <!DOCTYPE html> 
         
 
         
 
          < 
          html 
          > 
         
 
         
 
          < 
          head 
          > 
         
 
         
 
          < 
          meta 
          charset 
          = 
          " utf-8" 
          > 
         
 
         
 
          < 
          meta 
          name 
          = 
          "author" 
          content 
          = 
          "http://www.softwhy.com/" 
          /> 
         
 
         
 
          < 
          title 
          >蚂蚁部落</ 
          title 
          > 
         
 
         
 
          < 
          style 
          > 
         
 
         
 
          html,body{ 
         
 
         
 
             
          padding:10px; 
         
 
         
 
             
          margin:0px; 
         
 
         
 
             
          width:100%; 
         
 
         
 
             
          height:100%; 
         
 
         
 
             
          overflow:hidden; 
         
 
         
 
          } 
         
 
         
 
          table{ 
         
 
         
 
             
          border:1px solid #ccc; 
         
 
         
 
          } 
         
 
         
 
          td{ 
         
 
         
 
             
          width:100px; 
         
 
         
 
             
          height:100px; 
         
 
         
 
             
          text-align:center; 
         
 
         
 
             
          font-family:arial; 
         
 
         
 
             
          border:1px solid #aaa; 
         
 
         
 
             
          vertical-align:center; 
         
 
         
 
          } 
         
 
         
 
          </ 
          style 
          > 
         
 
         
 
          </ 
          head 
          > 
         
 
         
 
          < 
          body 
          > 
         
 
         
 
          < 
          table 
          border 
          = 
          "1" 
          cellspacing 
          = 
          "0" 
          cellpadding 
          = 
          "10" 
          > 
         
 
         
 
             
          < 
          tr 
          > 
         
 
         
 
               
          < 
          td 
          ></ 
          td 
          > 
         
 
         
 
               
          < 
          td 
          rowspan 
          = 
          '2' 
          ></ 
          td 
          > 
         
 
         
 
               
          < 
          td 
          ></ 
          td 
          > 
         
 
         
 
             
          </ 
          tr 
          > 
         
 
         
 
             
          < 
          tr 
          > 
         
 
         
 
               
          < 
          td 
          ></ 
          td 
          > 
         
 
         
 
               
          < 
          td 
          ></ 
          td 
          > 
         
 
         
 
             
          </ 
          tr 
          > 
         
 
         
 
             
          < 
          tr 
          > 
         
 
         
 
               
          < 
          td 
          ></ 
          td 
          > 
         
 
         
 
               
          < 
          td 
          colspan 
          = 
          "2" 
          ></ 
          td 
          > 
         
 
         
 
             
          </ 
          tr 
          > 
         
 
         
 
          </ 
          table 
          > 
         
 
         
 
          </ 
          body 
          > 
         
 
         
 
          </ 
          html 
          > 
         
 
        
 
 
   
 
  
 
 
 
 
关键是利用了rowspan和colspan属性。
 
 

 
 

 
 
原文发布时间为：2017-2-13
 
 
本文作者：admin
 
 
本文来自云栖社区合作伙伴“蚂蚁部落”，了解相关信息可以关注蚂蚁部落
 
 
原文链接：table表格单元格横向和属性合并代码实例
 


                

        

        




    




    

      

        

            

              
                
                  weixin_34007906
                
              
            

            

                关注
              
            

        

        

          
    
            
  • 
              
                
                
                
                
                      0
                
              
              
    点赞
    
            
    • 
            
  • 
              
                
                
                
              
              
    踩
    
            
    • 
            
  • 
              
                
                
                
                
                    1
                
              
              
    
                
    
                  
                    收藏
                  
                
    
              
    
              
    
                
    
                  觉得还不错?
                  
                    一键收藏
                  
                 
                
    
              
    
            
    • 
          
  • 
            
    
              
              
            
    
              
              
              
                    0
              
            
            
    评论
    
          
    • 
          
  • 
          
    • 
          
  • 
            
              
            
              
    
            
              
                
            
    
          
    • 
        

      

      










                



	

		

			

				
					
table表格按列合并相同数据行单元格代码

				
			

			

				

					07-13
				

			

		

		

			
				
在jsp、html页面中实现table表格按列合并相同数据行单元格代码，可实现功能为：在一个table表格中，合并指定列中所有相同数据相邻行单元格内容。

			
		

	



                

              
                



	

		

			

				
					
vue横向的table表格

				
			

			

				

					weixin_55966654的博客
				

				

					09-07
					
					3739
					
				

			

		

		

			
				
最后的实现效果如下：

HTML代码如下：:colspan="alarms_models.length + 1"意思是规定单元格可横跨的列数，此处我动态设置为报警设备alarms_models+1，也可以写成colspan="10"
<table class="list-table">
    <thead>
      <tr class="table-title">
        <th class="tac"
            :colspan="al

			
		

	



                


  
              

                


	

		

			

				
					
table（表格）单元格合并：横向合并和纵向合并

				
			

			

				

					qq_42279379的博客
				

				

					07-22
					
					1万+
					
				

			

		

		

			
				
横向合并
<table border="1"  cellpadding="5" align="center">
    <caption>表格标题</caption>
    <tr align="center">
      <th>a</th>
      <th>b</th>
      <...

			
		

	





	

		

			

				
					
VUE element-ui之table表格横向展示（表尾汇总）

				
			

			

				

					HanXiaoXi_yeal的博客
				

				

					12-31
					
					1万+
					
				

			

		

		

			
				
产品需求：在正常表格下方进行一系列汇总（如：合计等），分析之后发现需要拼接一个或多个横向排列的表格。
实现步骤：
模板部分：
		<el-table :data="DataBefore">
			<!--此处为正常纵向表格,直接将横向表格拼接在下方-->
		</el-table>
<!-- 合计 -->
          <section>
            <el-table
              :show-header=

			
		

	



		

			
		



	

		

			

				
					
nz-table数据动态横向合并

				
			

			

				

					城南蝈蝈
				

				

					11-22
					
					397
					
				

			

		

		

			
				
原理：遍历json数据，对相同的json数据进行计数，然后把相同的json数据统一加上rowspan的长度，然后这些相同的json数据从0开始编号。我们参考前面的一篇文章：angular中对json数据按照某一字段进行排序 – 每天进步一点点 (longkui.site)然后就是我们的核心代码，对排序完毕的代码进行合并操作。i+=(rowSpan-1) //跳过相同的数据。然后需要对json数据中的某个字段进行排序。其中，第二个参数是要排序的字段和要分组的字段。//开始复制某组相同的数据。

			
		

	





	

		

			

				
					
【HTML】table表格拆分合并（colspan、rowspan）

					
热门推荐

				
			

			

				

					
				

				

					04-19
					
					17万+
					
				

			

		

		

			
				
代码演示 横向合并：<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UT

			
		

	





	

		

			

				
					
OpenXml合并Table单元格代码实例

				
			

			

				

					12-31
				

			

		

		

			
				
using DocumentFormat.OpenXml; using DocumentFormat.OpenXml.Packaging; using DocumentFormat.OpenXml.Wordprocessing; using OpenXML.Model;... //表格数据  public static List<List>> _tabData;  public Program

			
		

	





	

		

			

				
					
使用jQuery 操作table 完成单元格合并的实例

				
			

			

				

					11-27
				

			

		

		

			
				
判断是否合并单元格：  tr = $("#printPage tr").length;// 获取当前表格中tr的个数 var mark = 0; //要合并的单元格数 var index = 0; //起始行数 /* * 要合并单元格，需要存储两个参数， * 1，开始合并的单元格的...

			
		

	





	

		

			

				
					
table-rowspan表格自动合并单元格插件

				
			

			

				

					11-07
				

			

		

		

			
				
对table表格进行操作，两行根据点击添加 删除按钮 进行单元格的删除 添加 合并单元格。

			
		

	





	

		

			

				
					
【python】pandas

				
			

			

				

					bryant_meng
				

				

					09-10
					
					473
					
				

			

		

		

			
				
本博客为 Numpy & Pandas 莫烦 python 数据处理 的个人学习笔记！
numpy 的相关介绍可以参考 【python】numpy
最后一次更新时间为：2018-12-10

文章目录0 前言：1 Series2 DataFrame2.1 dtypes / index / columns / values2.2 describe / T2.3 sort_index3 Pandas 选择数据3.1 简单的筛选3.2 loc3.3 iloc3.4 ix3.5 Boolean index.

			
		

	





	

		

			

				
					
table表格竖列横排显示

				
			

			

				

					Little_Flower的博客
				

				

					03-07
					
					1万+
					
				

			

		

		

			
				
此段代码可以让表格的竖列变成横列显示，如果表格已经渲染好，此时需求需要你横排显示竖列的内容，就可以用到

先在HTML中写一个表格


&lt;table  class="table table-bordered table-hover"&gt;
  &lt;thead&gt;
    &lt;tr&gt;
      &lt;th&gt;产品名称&lt;/th&gt;
      &lt;th...

			
		

	





	

		

			

				
					
左右拖拽table表格实现横向滚动

				
			

			

				

					web那些事
				

				

					08-18
					
					3736
					
				

			

		

		

			
				
需求：有时候table表格内容比较多时，通过滚动条横向滚动不是太方便查看溢出内容，如果可以通过鼠标左右拖拽查看内容就方便多了。故有此demo

<!DOCTYPE HTML>
<html>
 <head>
  <title>表格</title>
  <style type="text/css">
   .table{width: 800px;}
   .divTable{...

			
		

	





	

		

			

				
					
table中tr数据的横排

				
			

			

				

					aliven1的博客
				

				

					08-17
					
					3948
					
				

			

		

		

			
				
1.table的样式定义了弹性布局之后，tr就变成了行内块，就会按盒子的大小横向排列：table{
      .box_flex(-webkit-flex,flex,row nowrap,flex-start,flex-start);}

2.定义tr的高度，根据盒子的高度计算盒子最多能放多少条数据，得出周期，在根据后台返回的数据总长度，看需要多少个周期，有多少个周期就需要调多少次显...

			
		

	





	

		

			

				
					
Jtable单元格合并的问题

				
			

			

				

					zcsearching的博客
				

				

					03-05
					
					1776
					
				

			

		

		

			
				
table网格单元格合并

			
		

	





	

		

			

				
					
html5中table表格标签中合并单元格

				
			

			

				

					masterShaw的博客
				

				

					06-07
					
					9194
					
				

			

		

		

			
				
百度经验：





首先，我们打开DreamWeaver软件，新建一个html的页面，并以table命名进行保存。










然后我们在页面的body标签内部，新建一个table，并在内部添加行和单元格标签。










接下来，我们需要在每个单元格中添上相应的文字，并在浏览器中查看效果。










			
		

	





	

		

			

				
					
Element table组件单元格合并（纵向）

				
			

			

				

					
				

				

					07-30
					
					1万+
					
				

			

		

		

			
				
一、计算

1.HTML


&lt;div class="lomeo-table-content"&gt;
                            &lt;el-table :data="rdata" :span-method="spanMethod" border style="width: 100%"&gt;
                                &

			
		

	





	

		

			

				
					
HTML_合并单元格

				
			

			

				

					Chill Lyn
				

				

					09-21
					
					2万+
					
				

			

		

		

			
				
首先我们创建一个3行3列的表格：
<table border="1px" width="400px" height="300px" style="text-align: center">
        <tr>
            <td>1</td>
            <td>2</td>
           ...

			
		

	





	

		

			

				
					
Ant Design Vue实现a-table表格单元格合并

					
最新发布

				
			

			

				

					06-01
				

			

		

		

			
				
Ant Design Vue的a-table组件默认不支持单元格合并，但是可以通过自定义渲染函数来实现单元格合并。以下是一个简单的示例代码：  ...  <a-table :columns=...这样就能实现 Ant Design Vue 的 a-table 表格单元格合并了。

			
		

	



              



  
“相关推荐”对你有帮助么？

  

      
    
          
  • 
              
    
                  
                  
              
    
              
    非常没帮助
    
          
    • 
          
  • 
              
    
                  
                  
              
    
              
    没帮助
    
          
    • 
          
  • 
              
    
                  
                  
              
    
              
    一般
    
          
    • 
          
  • 
              
    
                  
                  
              
    
              
    有帮助
    
          
    • 
          
  • 
              
    
                  
                  
              
    
              
    非常有帮助
    
          
    • 
      

      

      

          
          提交
      

      

  




          




        



    





    



      

      

        
      

      





	

		评论	
	

	
	




  

    

      添加红包
      
    

    

      

        
        

          
          
        

        
请填写红包祝福语或标题

      

      

        
        

          
          个
        

        
红包个数最小为10个

      

      

        
        

          
          元
        

        
红包金额最低5元

      

      

        
        

          当前余额3.43元
          前往充值 >
        

      

      

        

          需支付：10.00元
        

        
        
      

    

  





  

    
    
  

  

    
    
  








  

    

      

        

          

            
            
成就一亿技术人!

          

          

        

        

          

          

            领取后你会自动成为博主和红包主的粉丝
            规则
          

        

      

      

        

          

            
              
            
            

              
hope_wisdom
 发出的红包
            

          

        

        

          

          

          

        

      

    

    

  



      
      

      
实付元

      
使用余额支付

      

        

          

            
            点击重新获取
          

        

        
扫码支付

      

      

        
          
            
          
          
        
      

      

        
        钱包余额
          0
          

            
            

              

                
抵扣说明：

                
 1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
 2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

              

            

          

      

      余额充值