*{

padding: 0;

margin: 0;

}

.box{

margin: 50px auto;

width: 1000px;

}

.data-v{

padding-left: 87px;

border-left: #d3d3d3 1px solid;

border-right:0 ;

font-size: 14px;

}

.data-v table{

border-collapse: collapse;

border-spacing: 0;

table-layout: fixed;

width: 100%;

position: relative;

}

.data-v .data-v-head td{

border-bottom: #d3d3d3 1px solid;

}

.data-v .data-v-head div{

height: 100px;

box-sizing: border-box;

padding: 25px 0 0 0;

}

.data-v .data-v-head div h3{

font-size: 20px;

margin-bottom: 10px;

}

.data-v .data-v-head div span{

color: #666;

}

.data-v td{

height: 40px;

text-align: center;

border-left:#d3d3d3 1px solid;

background-clip: padding-box;

position: relative;

box-sizing: border-box;

padding: 10px;

cursor: pointer;

}

.data-v td div{

}

.data-v tr td:last-child{

border-right: #d3d3d3 1px solid;

}

.data-v tr td:first-child{

background-color: #fff;

border-left: none;

text-align: left;

width: 130px;

cursor: default;

}

.data-v tr td:first-child:after{

position: absolute;

content: '';

border-bottom: #f0f2f5 1px solid;

bottom:0px;

left: 0px;

width: 129px;

}

.data-v tr td:first-child h4{

position: absolute;

width: 206px;

top: -1px;

left: -87px;

font-size: 14px;

color: #999;

border-top: #d3d3d3 1px solid;

padding: 10px 0 0 10px;

}

.data-v tr:nth-child(2n){

background-color: #f0f2f5;

}

.data-v tr:first-child td{

border-top: #d3d3d3 1px solid;

}

.data-v tr:first-child td:first-child:after{

position: absolute;

content: '';

border-bottom: #d3d3d3 1px solid;

top:-1px;

left: -87px;

width: 207px;

height: 0px;

}

.data-v tr:last-child td:first-child{

border-bottom: 0;

}

.data-v tr:last-child td:first-child:after{

position: absolute;

content: '';

border-bottom: #d3d3d3 1px solid;

bottom:-1px;

left: -87px;

width: 217px;

height: 0;

}

.data-v tr:last-child td{

border-bottom: #d3d3d3 1px solid;

}

/*hover start*/

.data-v tr td.hover{

border-left: #2277da 1px solid;

border-right:#2277da 1px solid;

}

.data-v tr:first-child td.hover{

border-top: #2277da 1px solid;

background-color: #e8f1fb;

border-bottom: #bbd5f4 1px solid;

}

.data-v tr:first-child td.hover h3{

color: #4d8bdf;

}

.data-v tr:last-child td.hover{

border-bottom: #2277da 1px solid;

}

/*hover end*/

/*当前态 start*/

.data-v tr td.selected{

border-left: #2277da 1px solid;

border-right:#2277da 1px solid;

}

.data-v tr:first-child td.selected{

border-top: 0;

background-color: #e8f1fb;

border-bottom: #bbd5f4 1px solid;

}

.data-v tr:first-child td.selected:after{

position: absolute;

content: '';

border: #2277da 1px solid;

border-bottom: 0;

height: 10px;

width: 100%;

top: -10px;

left:-1px;

background-color: #e8f1fb;

}

.data-v tr:first-child td.selected h3{

color: #4d8bdf;

}

.data-v tr:last-child td.selected{

border-bottom: #2277da 1px solid;

}

.data-v tr:last-child td.selected:after{

position: absolute;

content: '';

background-image: url(https://www.chengrang.com/demo/icon18.png);

width: 32px;

height: 32px;

bottom: 0;

right:0;

}

/*当前态 end*/

/*当前态 end*/

@-moz-document url-prefix(){

.data-v tr:first-child td:first-child:after{

top:-2px;

}

.data-v tr:first-child td.selected:after{

width: calc(100% + 1px);

left:-2px;

}

}

(function(){

var $data = $('.data-v');

$data

.on('click','td',function(){

var index = $(this).index();

$(this).closest('table').find('tr').each(function(cont,tr){

$(tr).find('td').each(function(i,item){

if(i==index&&i!=0){

$(item).addClass('selected')

}else {

$(item).removeClass('selected')

}

})

})

})

.on('mouseenter','td',function(){

var index = $(this).index();

$(this).closest('table').find('tr').each(function(cont,tr){

$(tr).find('td').each(function(i,item){

if(i==index&&i!=0){

$(item).addClass('hover')

}else {

$(item).removeClass('hover')

}

})

})

})

.on('mouseleave','td',function(){

$data.find('.hover').removeClass('hover')

})

})();