欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  web前端

css实现表格的行和列相互交换的代码

程序员文章站 2022-04-10 11:43:38
...
这篇文章给大家介绍的内容是关于css实现表格的行和列相互交换的代码,有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助。
<!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 p {
				-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;
			//注:多次点击后,内面文字会包裹多层p,尚无好的解决方法
			function test() {
				if(!flag) {
					$('table').addClass('vertical').find('th, td').wrapInner('<p>');
//					$('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>

相关推荐:

css3中animation属性实现箭头向右滚动渐隐的代码

css中定位问题:绝对定位、相对定位、fixed和static

鼠标移入移出时覆盖另一张图片怎么用css来实现?(示例)

以上就是css实现表格的行和列相互交换的代码的详细内容,更多请关注其它相关文章!

相关标签: css