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
{
width: 100px;
-webkit-writing-mode: horizontal-tb;
-moz-writing-mode: horizontal-tb;
-ms-writing-mode: lr-tb;
writing-mode: horizontal-tb;
}
var flag = false;
//注:多次点击后,内面文字会包裹多层div,尚无好的解决方法
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 |
Chrome 39.0.2171.95 m, IE 11 通过
参考: [http://www.gbtags.com/gb/share/4511.htm][http_www.gbtags.com_gb_share_4511.htm]
[http_www.gbtags.com_gb_share_4511.htm]: http://www.gbtags.com/gb/share/4511.htm