您的位置:阿里西西 > 前端技术 > CSS教程 > 详细内容

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

  本站整理   互联网   2018-08-10   点击:   我要评论
这篇文章给大家介绍的内容是关于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>



更多关于 的文章
会员评论所有会员评论

  

相关排行总榜

网页教程

站长文章

特效排行