这篇文章给大家介绍的内容是关于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;
}
var flag = false;
//注:多次点击后,内面文字会包裹多层p,尚无好的解决方法
function test() {
if(!flag) {
$('table').addClass('vertical').find('th, td').wrapInner('
');
//$('table').addClass('vertical');//数字会变垂直,不能用
} else {
$('table').removeClass('vertical');
}
flag = !flag;
}
列1 | 列2 | 列3 | 列4 |
---|---|---|---|
数据1-1 | 数据1-2 | 数据1-3 | 数据1-4 |
数据2-1 | 数据2-2 | 数据2-3 | 数据2-4 |
数据3-1 | 数据3-2 | 数据3-3 | 数据3-4 |
数据1-1 | 数据1-2 | 数据1-3 | 数据1-4 |
数据2-1 | 数据2-2 | 数据2-3 | 数据2-4 |
数据3-1 | 数据3-2 | 数据3-3 | 数据3-4 |
数据1-1 | 数据1-2 | 数据1-3 | 数据1-4 |
数据2-1 | 数据2-2 | 数据2-3 | 数据2-4 |
数据3-1 | 数据3-2 | 数据3-3 | 数据3-4 |
数据1-1 | 数据1-2 | 数据1-3 | 数据1-4 |
数据2-1 | 数据2-2 | 数据2-3 | 数据2-4 |
数据3-1 | 数据3-2 | 数据3-3 | 数据3-4 |
数据1-1 | 数据1-2 | 数据1-3 | 数据1-4 |
数据2-1 | 数据2-2 | 数据2-3 | 数据2-4 |
数据3-1 | 数据3-2 | 数据3-3 | 数据3-4 |
数据1-1 | 数据1-2 | 数据1-3 | 数据1-4 |
数据2-1 | 数据2-2 | 数据2-3 | 数据2-4 |
数据3-1 | 数据3-2 | 数据3-3 | 数据3-4 |
数据1-1 | 数据1-2 | 数据1-3 | 数据1-4 |
数据2-1 | 数据2-2 | 数据2-3 | 数据2-4 |
数据3-1 | 数据3-2 | 数据3-3 | 数据3-4 |
数据1-1 | 数据1-2 | 数据1-3 | 数据1-4 |
数据2-1 | 数据2-2 | 数据2-3 | 数据2-4 |
数据3-1 | 数据3-2 | 数据3-3 | 数据3-4 |
相关推荐: