html表格添加排序图标,bootstrap-table⾃定义排序图标bootstrap-table 修改排序图标
⼀、修改bootstrap-table.js
1、在表头插⼊span元素，根据是否启⽤表格排序添加class=‘both’(为排序箭头做准备)
2、将removeClass(‘desc asc’)改为removeClass(‘both desc asc’)(为后⾯写样式准备)
⼆、修改bootstrap-table.css
1、去掉以图⽚作为排序图标样式
2、添加⾃定义样式
三、结果
⾃定义样式代码
.fixed-table-container thead th .both > .both{
margin-left: 15px;
display: inline-block;
position: relative;
}
.fixed-table-container thead th .both > .both:before{ content: ”;
display: inline-block;
border-left: 4px solid transparent;
border-right: 4px solid transparent;
border-bottom: 4px solid #000;
vertical-align: middle;
html表格元素position: absolute;
left: -4px;
top:-10px
}
.fixed-table-container thead th .both > .both:after{ content: ”;
display: inline-block;
border-left: 4px solid transparent;
border-right: 4px solid transparent;
border-top: 4px solid #000;
vertical-align: middle;
position: absolute;
left: -4px;
top:-4px
}
.fixed-table-container thead th .asc >.both{
margin-left: 12px;
display: inline-block;
border-left: 4px solid transparent;
border-right: 4px solid transparent;
border-bottom: 4px solid #000;
vertical-align: middle;
position:static;
}
.fixed-table-container thead th .desc >.both{ margin-left: 12px;
display: inline-block;
border-left: 4px solid transparent;
border-right: 4px solid transparent;
border-top: 4px solid #000;
vertical-align: middle;
position:static;
}

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。