css表格行列互换

最新推荐文章于 2022-05-31 17:47:22 发布
最新推荐文章于 2022-05-31 17:47:22 发布
阅读量2k 收藏 1
点赞数 2
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_38474685/article/details/81557584
版权

 

<!DOCTYPE html>
<html>

	<head>
		<title>行列互换</title>
		<meta charset="UTF-8">
		<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
		<style type="text/css">
			table {
				border: 1px solid #ccc;
				font-size: 14px;
			}
			
			table th {
				background: orange;
				color: #fff;
				padding: 10px;
			}
			
			table td {
				padding: 10px;
			}
			
			table.vertical {
				-webkit-writing-mode: vertical-lr;
				-moz-writing-mode: vertical-lr;
				-ms-writing-mode: tb-lr;
				writing-mode: vertical-lr;
			}
			
			table.vertical th,
			table.vertical td {
				width: 100px;
				height: 14px;
			}
			
			table.vertical div {
				-webkit-writing-mode: horizontal-tb;
				-moz-writing-mode: horizontal-tb;
				-ms-writing-mode: lr-tb;
				writing-mode: horizontal-tb;
			}
		</style>
		<script type="text/javascript">
			var flag = false;
			//注：多次点击后，内面文字会包裹多层div，尚无好的解决方法
			function test() {
				if(!flag) {
					$('table').addClass('vertical').find('th, td').wrapInner('<div>');
//					$('table').addClass('vertical');//数字会变垂直，不能用
				} else {
					$('table').removeClass('vertical');
				}
				flag = !flag;
			}
		</script>
	</head>

	<body>
		<table>
			<tr>
			<tr>
				<th>列1</th>
				<th>列2</th>
				<th>列3</th>
				<th>列4</th>
			</tr>
			<tr>
				<td>数据1-1</td>
				<td>数据1-2</td>
				<td>数据1-3</td>
				<td>数据1-4</td>
			</tr>
			<tr>
				<td>数据2-1</td>
				<td>数据2-2</td>
				<td>数据2-3</td>
				<td>数据2-4</td>
			</tr>
			<tr>
				<td>数据3-1</td>
				<td>数据3-2</td>
				<td>数据3-3</td>
				<td>数据3-4</td>
			</tr>
			<tr>
				<td>数据1-1</td>
				<td>数据1-2</td>
				<td>数据1-3</td>
				<td>数据1-4</td>
			</tr>
			<tr>
				<td>数据2-1</td>
				<td>数据2-2</td>
				<td>数据2-3</td>
				<td>数据2-4</td>
			</tr>
			<tr>
				<td>数据3-1</td>
				<td>数据3-2</td>
				<td>数据3-3</td>
				<td>数据3-4</td>
			</tr>
			<tr>
				<td>数据1-1</td>
				<td>数据1-2</td>
				<td>数据1-3</td>
				<td>数据1-4</td>
			</tr>
			<tr>
				<td>数据2-1</td>
				<td>数据2-2</td>
				<td>数据2-3</td>
				<td>数据2-4</td>
			</tr>
			<tr>
				<td>数据3-1</td>
				<td>数据3-2</td>
				<td>数据3-3</td>
				<td>数据3-4</td>
			</tr>
			<tr>
				<td>数据1-1</td>
				<td>数据1-2</td>
				<td>数据1-3</td>
				<td>数据1-4</td>
			</tr>
			<tr>
				<td>数据2-1</td>
				<td>数据2-2</td>
				<td>数据2-3</td>
				<td>数据2-4</td>
			</tr>
			<tr>
				<td>数据3-1</td>
				<td>数据3-2</td>
				<td>数据3-3</td>
				<td>数据3-4</td>
			</tr>
			<tr>
				<td>数据1-1</td>
				<td>数据1-2</td>
				<td>数据1-3</td>
				<td>数据1-4</td>
			</tr>
			<tr>
				<td>数据2-1</td>
				<td>数据2-2</td>
				<td>数据2-3</td>
				<td>数据2-4</td>
			</tr>
			<tr>
				<td>数据3-1</td>
				<td>数据3-2</td>
				<td>数据3-3</td>
				<td>数据3-4</td>
			</tr>
			<tr>
				<td>数据1-1</td>
				<td>数据1-2</td>
				<td>数据1-3</td>
				<td>数据1-4</td>
			</tr>
			<tr>
				<td>数据2-1</td>
				<td>数据2-2</td>
				<td>数据2-3</td>
				<td>数据2-4</td>
			</tr>
			<tr>
				<td>数据3-1</td>
				<td>数据3-2</td>
				<td>数据3-3</td>
				<td>数据3-4</td>
			</tr>
			<tr>
				<td>数据1-1</td>
				<td>数据1-2</td>
				<td>数据1-3</td>
				<td>数据1-4</td>
			</tr>
			<tr>
				<td>数据2-1</td>
				<td>数据2-2</td>
				<td>数据2-3</td>
				<td>数据2-4</td>
			</tr>
			<tr>
				<td>数据3-1</td>
				<td>数据3-2</td>
				<td>数据3-3</td>
				<td>数据3-4</td>
			</tr>
			<tr>
				<td>数据1-1</td>
				<td>数据1-2</td>
				<td>数据1-3</td>
				<td>数据1-4</td>
			</tr>
			<tr>
				<td>数据2-1</td>
				<td>数据2-2</td>
				<td>数据2-3</td>
				<td>数据2-4</td>
			</tr>
			<tr>
				<td>数据3-1</td>
				<td>数据3-2</td>
				<td>数据3-3</td>
				<td>数据3-4</td>
			</tr>
		</table>
		<input type="button" onclick="test()" value="行列转置" />
	</body>

</html>

 

张近近
关注
  • 2
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
“自动换列”的CSS设计
u013891299的专栏
03-05 2363
CSS中只有自动换行的概念，常规流中的东西如果无法塞入当前行盒子中就会另起新行来放置。但对于列满的情况并没有“自动换列”的概念，因为对于一个容器而言，行盒子只有一列，即使这一列行盒子超出容器的范围，它也只是撑开或超出容器，不会产生新的列。 但实现起来有点猥琐了。既然CSS有自动换行的性质，那么我们把行和列的概念互换不就可以得到“自动换列”了吗？我们需要对行列转置，并且为了保持内容的方向，也需要让
table行列数据转换
12-24
table动态行列数据转换，希望能帮到大家，是C#代码行列转换，告别传统的sql语句行列转换！
DataTable行列转换
昕友软件博客
10-13 203
  DataTable行列转换的函数，找遍了网上都没找到，还是自己写了，这个函数在ContrastTable函数将被调用，ContrastTable用于实现在视图中对比数据，类似于pcoline的产品比较功能。是DataTable版的，DataSet版的就不贴了。   public  DataTable cgDataTable(DataTable oldTable)...
table 的行列转换问题
06-21 157
一个sql查询各个owner下的一些object数目 select owner, object_type, count(*) from dba_objectswhere owner not in ('SYSTEM','SYS'...
table 行列转置demo
05-27
资源提供实现行列转置功能，采用Html代码table进行行列转换，并可通过ajax异步调用后台数据，结合js，动态实现行列转置。
用css实现表格行交替变
风随意静
07-14 473
方法一：.db { border-collapse:collapse;}.db tr{ background-color:expression(#dbdbdb,#EFEFEF.split(,)[rowIndex%2]); }      
element 树形表格行列转换（行列转换系列2）
qq_41026858的博客
05-31 903
我们上篇文章写的是关于element普通表格的行列转换，下面我们开始写element树形表格的行列转换 实现效果： 首先：我们通过element的官方文档中可以看出、当row 字段中包含children字段时，会被当做树形数据，但是前提必须指定一个唯一的 row-key ,意思是不管父级还是子级，都要有row-key指定的字段且不能重复，同时也要在tree-props 中指定children 与 hasChildren（用于懒加载） row-key="id" :tree-props="{ childr.
html表格行列转换,table 的行列转换问题
weixin_42601134的博客
05-31 581
一个sql查询各个owner下的一些object数目select owner, object_type, count(*)from dba_objectswhere owner not in ('SYSTEM','SYS','DBSNMP','OUTLN','WMSYS','SCOTT')group by owner,object_type显示如下：OWNER OBJECT_TYPE C...
轻松搞定html table td tr 行列转置的问题
jidawanghao的专栏
06-12 1151
也没有华丽的js 脚本 转置的方法就是设置 a1a2a3a4 b1b2b3b4 c1c2c3 c4 d1d2d3d4 多组变量去作为变量取出数据 <td class="td1"><%d1=Formatnumber(rs4("上年同期;1-本月;零售额;千元")/100000,1,-1,-1,0)%></td> 呈现的时候采用的方法是： <%if d2<>0 then %> <td class...
兼容主流浏览器的纯JS动态拖动表格实现行列内容交换
11-14
项目开发中需要用到一个拖动交换表格的功能，上网搜到雅虎的一个控件，结果简单的一个拖动交换行，就要引入七八个js library，太麻烦了。就自己综合网上资源写了一个可兼容IE，firefox，Chrome，Safari和Opera等主流浏览器的纯JS动态拖动表格实现行列内容交换。主要代码就不到400行JS而已。
html css自适应换列,html高度自适应_css实现div两列高度自适应实例介绍
weixin_30651345的博客
06-19 179
body{ margin:0; background:#f5f5f5;}.Header{ width:600px; margin:auto; background:green; height:80px;}.Mian{ width:600px; margin-left:auto; margin-right:auto;}.Mianbg{ width:600px; background:#CC9999;...
使用CSS格式化Table样式
lecui的专栏
05-15 4774
在网页里使用table的时候，样式一般比较难管理，因为table的有些样式与其它控件不太一样1、table的分外边框，tr边框，td边框，它们之间都是有间距的2、你可以指定它们之间的间距为0，但当你设置边框时，会发现边框是2px宽的，因为在table里，tr、td等元素是相邻的所以想做一个好看的table样式可以参考以下的步骤：1、table设置 border-collapse
html中table切换效果,从table转而使用div+css
weixin_30303283的博客
06-05 1166
一般来讲，table打好语法就可以呈现效果了，而且语法很简单，就单纯的table、tr、td，这三个语法就可以画出表格，在各个浏览器下也都可以正常的显示。如果觉得排版不漂亮，就直接在语法内加上width、color等等的属性值，效果很容易就达到了，可是这样会让程式码杂乱。对于搜寻引擎来讲，他们抓网站内容通常不会一次抓完，会先抓到一定的网页大小，之后再来，如果你把样式调整的程式码都放进去，很快的，搜...
CSS实现表格行列转置
weixin_33766168的博客
01-03 884
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> &lt...
css行和列的代码,css实现表格的行和列相互交换的代码
weixin_39852647的博客
08-03 663
这篇文章给大家介绍的内容是关于css实现表格的行和列相互交换的代码，有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。行列互换table {border: 1px solid #ccc;font-size: 14px;}table th {background: orange;color: #fff;padding: 10px;}table td {padding: 10px;}tab...
js 翻转表格（行列互换）
tingwufeixiang的博客
11-25 5047
有时候表格的行太长需要将表格的行作为列翻转过来
把div转换为table的td,横向排列，div等高
xdongll的专栏
07-18 4709
.leftHeight{width: 300px;border: solid 1px red; }         .centerHeight{width: 200px;border: solid 1px blue; }         .rightHeight{width: 500px; border: solid 1px black; }         .leftHeight,.cen
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值