table跨行（rowspan）跨列（colspan）

最新推荐文章于 2024-07-12 00:07:26 发布
最新推荐文章于 2024-07-12 00:07:26 发布
阅读量4.3k 收藏
点赞数
分类专栏： html 文章标签： table
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/cx361006796/article/details/51669760
版权 
<table class="tree dataTable no-footer" showAddBtn="true">
         <tr style="background: #DBDBDB">
             <td colspan="6" align="center">发票开具确认单</td>
         </tr>
         <tr>
             <td colspan="2" align="center" style="background: #DBDBDB">单位</td>
             <td colspan="4" align="center"></td>
         </tr>
         <tr>
             <td rowspan="7" align="center" width="7%" style="background: #DBDBDB">信息</td>
         </tr>
         <tr>
             <td align="center" width="15%" style="background: #DBDBDB">金额</td>
             <td align="center" colspan="4">100(万)</td>
         </tr>
         <tr>
             <td align="center" style="background: #DBDBDB">金额</td>
             <td align="center" colspan="4">100(万)</td>
         </tr>
         <tr>
             <td align="center" style="background: #DBDBDB">金额</td>
             <td align="center" colspan="4">100(万)</td>
         </tr>
         <tr>
             <td align="center" style="background: #DBDBDB">发票</td>
             <td align="center" colspan="4">
                 <input type="radio" checked="checked" name="type" value="1">发票
                 <input type="radio" name="type" value="2">发票
                 <input type="radio" name="type" value="3">发票
             </td>
         </tr>
         <tr>
             <td align="center" style="background: #DBDBDB">周期</td>
             <td align="center" colspan="4"> 1年0月</td>
         </tr>
         <tr>
             <td align="center" style="background: #DBDBDB">时间</td>
             <td align="center" colspan="4">2016年6月10日</td>
         </tr>
         <tr>
             <td rowspan="10" align="center" style="background: #DBDBDB">开票资料</td>
         </tr>
         <tr>
             <td align="center" style="background: #DBDBDB">名称</td>
             <td align="center" colspan="4">公司</td>
         </tr>
         <tr>
             <td align="center" style="background: #DBDBDB">纳税人识别号</td>
             <td align="center" colspan="4">001</td>
         </tr>
         <tr>
             <td align="center" style="background: #DBDBDB">地址</td>
             <td align="center" colspan="4">上海浦东 13286337792</td>
         </tr>
         <tr>
             <td align="center" style="background: #DBDBDB">帐号</td>
             <td align="center" colspan="4">银行 </td>
         </tr>
         <tr>
             <td align="center" style="background: #DBDBDB">名称</td>
             <td align="center" style="background: #DBDBDB">型号</td>
             <td align="center" style="background: #DBDBDB">单位</td>
             <td align="center" style="background: #DBDBDB">数量</td>
             <td align="center" style="background: #DBDBDB">金额</td>
         </tr>
         <tr>
             <td align="center">aa</td>
             <td align="center">bb</td>
             <td align="center">cc</td>
             <td align="center">dd</td>
             <td align="center">ee</td>
         </tr>
         <tr>
             <td align="center">aa</td>
             <td align="center">bb</td>
             <td align="center">cc</td>
             <td align="center">dd</td>
             <td align="center">ee</td>
         </tr>
         <tr>
             <td align="center">aa</td>
             <td align="center">bb</td>
             <td align="center">cc</td>
             <td align="center">dd</td>
             <td align="center">ee</td>
         </tr>
         <tr>
             <td align="center" colspan="3" style="background: #DBDBDB">合计</td>
             <td align="center">60(箱)</td>
             <td align="center">100(万)</td>
         </tr>
         <tr>
             <td align="center" rowspan="4" style="background: #DBDBDB">信息</td>
         </tr>
         <tr>
             <td align="center" style="background: #DBDBDB">地址</td>
             <td align="center" colspan="4">上海市</td>
         </tr>
         <tr>
             <td align="center" style="background: #DBDBDB">收 件 人</td>
             <td align="center" colspan="2"></td>
             <td align="center">电话</td>
             <td align="center">13286337792</td>
         </tr>
         <tr>
             <td align="center" style="background: #DBDBDB">寄送方式</td>
             <td align="center" colspan="4">顺丰快递
             </td>
         </tr>
 </table>

                

        

        

    

  


    

      

        

            

              
                
                  cx361006796
                
              
            

            

                关注
              
            

        

        

          
      

      

            

                专栏目录
          









                



	

		

			

				
					
table合并单元格 colspan（跨列）和rowspan（跨行）

				
			

			

				

					Dove言和 
				

				

					07-03
					
					3万+
					
				

			

		

		

			
				
原文链接colspan和rowspan这两个属性用于创建特殊的表格。colspan是“column span（跨列）”的缩写。colspan属性用在td标签中，用来指定单元格横向跨越的列数：在浏览器中将显示如下：单元格1单元格2单元格3单元格4该例通过把colspan设为“3”, 令所在单元格横跨了三列。如果我们将colspan设为“2”，则该单元格将只跨越两列，于是有必要在第一行插入另外一个单元...

			
		

	



                

              
                



	

		

			

				
					
antd-vue table跨行合并单元格

				
			

			

				

					peppa_pig的博客
				

				

					12-18
					
					2059
					
				

			

		

		

			
				
效果图：



直接贴代码


<a-table
    :columns="columns" :data-source="statisticData" bordered size="small"
    :pagination=false :scroll="scrollY"
    :rowKey="(record,index)=>{return index}">


const columns = [
  {
    title: '资产',
    colSpan: 3,
   ..

			
		

	



                


  
              

                


	

		

			

				
					
Flutter实现Table跨行跨列

				
			

			

				

					06-01
				

			

		

		

			
				
Flutter实现Table跨行跨列

			
		

	





	

		

			

				
					
HTML--table--跨行跨列

				
			

			

				

					weixin_46858088的博客
				

				

					12-14
					
					2097
					
				

			

		

		

			
				
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>跨行跨列</title>
		<style type="text/css">
			table{
				border: 1px solid;
				width: 500px;
			}
			
			table td,th{
				border: 0.0625rem solid;
	...

			
		

	



		

			
		



	

		

			

				
					
HTML常见标签——表格＜table＞标签、表格标签常见的属性、表格的跨行合并和跨列合并

					
最新发布

				
			

			

				

					weixin_64294248的博客
				

				

					07-12
					
					2964
					
				

			

		

		

			
				
HTML中的表格是用于用于统计、展示结构化数据的标记语言元素。表格标签是双标签，写作。每个表格分为表格标题（由  标签定义），以及表格单元格（由  标签定义），表格标题和表格身体中均有若干行（由  标签定义），每行被分割为若干单元格（由  标签定义），表格可以包含标题行（）用于定义列的标题，其中标题行（）会有默认加粗的效果。

			
		

	





	

		

			

				
					
colspan和rowspan

				
			

			

				

					yoloo
				

				

					09-14
					
					3696
					
				

			

		

		

			
				
colspan和rowspan这两个属性用于创建特殊的表格。
colspan是“column span（跨列）”的缩写。colspan属性用在td标签中，用来指定单元格横向跨越的列数：
例1：

在浏览器中将显示如下：


    
        
            单元格1
        
        
            单元格2
            单元格3
     ...

			
		

	





	

		

			

				
					
HTML table跨行跨列

				
			

			

				

					growdu的网络博客
				

				

					06-28
					
					1290
					
				

			

		

		

			
				
HTML table跨行跨列
table读取
读取时，表格行数与列数都已经确定，且每行单元格个数相同,每列单元格个数也相同。
跨行跨列时，相应的单元格就要多占行单元格的位置和列单元格的位置。

跨行
跨多少行，相应的该单元格就要多占据行数-1个单元格，每跨一行，该单元格下一行就减少一个单元格。跨行时下一行单元格数减少。

<table border="1">
<tr>
&l...

			
		

	





	

		

			

				
					
table同时实现跨行跨列

				
			

			

				

					細水、長流√的专栏
				

				

					11-05
					
					1107
					
				

			

		

		

			
				
希望对于要实现这种效果的老铁有帮助。

			
		

	





	

		

			

				
					
javascript 动态table添加colspan\rowspan 参数的方法

				
			

			

				

					10-29
				

			

		

		

			
				
`colspan`用于指定一个单元格应横跨的列数，`rowspan`则用于指定一个单元格应纵跨的行数。  然而，传统的方式通过`setAttribute`方法设置`colspan`和`rowspan`属性可能无法达到预期的效果。例如，如果尝试对一个...

			
		

	





	

		

			

				
					
react antd组件table跨行跨列

				
			

			

				

					xye1230的博客
				

				

					03-15
					
					1487
					
				

			

		

		

			
				
给官网上的看不懂的同行写的，毕竟我一开始也看不懂（现在也没看懂）
逻辑是在列的设置上写，通过条件判断跨行还是不跨行以及跨多少行
const columns =[
	title: '姓名',
    dataIndex: 'name',
    key: 'name',
    render:(text,record,index)=>{
    	if(text === '小李'){
    		return {
				chidren: <div>填你要写的内容</div>,


			
		

	





	

		

			

				
					
el-table 跨行/跨列 的写法

				
			

			

				

					Xu190131的博客
				

				

					06-09
					
					2341
					
				

			

		

		

			
				
一. el-table 跨行/跨列 的写法
<el-table>
    :span-method="objectSpanMethod"
</el-table>

// 隐藏第一行 的所有列 也就是 orderList[0]
objectSpanMethod ({ rowIndex, columnIndex }) {
    if (rowIndex === 0) {
        return {
            rowspan: 0,
            colsp

			
		

	





	

		

			

				
					
table 常见属性及跨行跨列

				
			

			

				

					神膘护体小月半的博客
				

				

					03-11
					
					1364
					
				

			

		

		

			
				
table 常用属性
width - 宽度

传值为百分比或具体尺寸
表格横向内容默认为弹性布局
如图设置宽度为 400 (默认绘制成 400px)



如图设置为 80%


height - 高度

传值为百分比 (从父元素继承) 或具体尺寸
除去 thead 部分，剩余高度默认弹性布局
如图为 thead 部分添加背景色，可看出整体 table 高度为 height 设置的值，剩余部分由 tbody 部分占用



border - 边框

表格及单元格的边框
如图设置边框为 1


cellspa

			
		

	





	

		

			

				
					
表格标签（table）的用法以及跨行跨列

				
			

			

				

					weixin_72431184的博客
				

				

					05-16
					
					772
					
				

			

		

		

			
				
表格标签（table）的用法以及跨行跨列

			
		

	





	

		

			

				
					
HTML中table跨行跨列练习

				
			

			

				

					m0_47723181的博客
				

				

					05-18
					
					286
					
				

			

		

		

			
				
HTML中table跨行跨列练习


  <table border="1" width=300 height=150 align="center" bordercolor=green>
        <tr>
            <td colspan="3"></td>
           
        </tr>
        <tr>
            <td colspan="2"></t

			
		

	





	

		

			

				
					
html中实现table跨行跨列

				
			

			

				

					qq_35511307的博客
				

				

					07-12
					
					2717
					
				

			

		

		

			
				
原创作品，请勿转载，谢谢合作啦~
         今天在公司做个打印需求时，被table难住了，网上给的跨行跨列没有能解决我的问题的，于是乎想给基础较差的同行说道说道。
         普通的跨行跨列在这里我就不说了，网上一大片！！！ 这里要给大家举个相对来讲复杂的例子。如下图所示：
         我们由图不难看出，出现的跨列比较复杂。在这里我把本表分成了14列（table中，设置不

			
		

	





	

		

			

				
					
【转】html 代码中 table 跨行跨列的操作

				
			

			

				

					魂-淡
				

				

					01-06
					
					3577
					
				

			

		

		

			
				
例1 跨2列:
<table border="1">
    <tr>
         <td colspan="2" align="center">111</td>
    </tr>
    <tr>
         <td>222</td>
         <td>333<...

			
		

	





	

		

			

				
					
table标签、表格的跨行跨列、ifarme标签

				
			

			

				

					weixin_46065214的博客
				

				

					08-15
					
					791
					
				

			

		

		

			
				
table标签、表格的跨行跨列、ifarme标签

			
		

	





	

		

			

				
					
table跨行跨列，字体大小

				
			

			

				

					渐行渐远
				

				

					05-10
					
					1165
					
				

			

		

		

			
				
table跨行跨列，字体大小

			
		

	





	

		

			

				
					
HTML中table标签的跨多行和多列布局方法

					
热门推荐

				
			

			

				

					weixin_37861326的博客
				

				

					06-25
					
					3万+
					
				

			

		

		

			
				
先放一张布局效果效果图在实现这一布局效果时，主要应用了rowspan、colspan跨行和跨列的属性布局。在所跨的行或者列，在其他行或者列中也是占位的。比如：第一项项目基本信息是跨过5行，因此在接下来的4行中，第一列已经是默认被占了，行中的td列是从第二列开始布局；最后一行，项目得分占据6列，因此第二个td实际对应的是该行的第七列。具体实现代码如下：HTML布局代码：&lt;!-- 明细表 --&...

			
		

	





	

		

			

				
					
html table跨行跨列

				
			

			

				

					09-22
				

			

		

		

			
				
html table可以通过使用colspan和rowspan属性来实现跨行跨列的设计。在引用和引用中展示了两个例子，演示了如何使用这些属性。在表格中，colspan属性指定一个单元格跨越的列数，而rowspan属性指定一个单元格跨越的行数。通过设置这些属性的值，我们可以控制表格中单元格的跨行跨列。



			
		

	



              




          




        



    





    



      

      

        
      

      





	

		评论	
	

	
	




  

    

      添加红包
      
    

    

      

        
        

          
          
        

        
请填写红包祝福语或标题

      

      

        
        

          
          个
        

        
红包个数最小为10个

      

      

        
        

          
          元
        

        
红包金额最低5元

      

      

        
        

          当前余额3.43元
          前往充值 >
        

      

      

        

          需支付：10.00元
        

        
        
      

    

  





  

    
    
  

  

    
    
  








  

    

      

        

          

            
            
成就一亿技术人!

          

          

        

        

          

          

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

        

      

      

        

          

            
              
            
            

              
hope_wisdom
 发出的红包
            

          

        

        

          

          

          

        

      

    

    

  



      
      

      
实付元

      
使用余额支付

      

        

          

            
            点击重新获取
          

        

        
扫码支付

      

      

        
          
            
          
          
        
      

      

        
        钱包余额
          0
          

            
            

              

                
抵扣说明：

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

              

            

          

      

      余额充值