纯CSS实现表格排序-利用CSS 变量和Flexbox

1.引子

今天闲逛知名前端资讯站Front-End Front，发现一个比较有意思的效果，给大家分享下，希望可以对大家有所启发。

纯CSS实现表格排序

心急的同学，先看效果，我放在codepen上。

---

codepen上预览、编辑效果

---

本案例用到了以下知识点：

• CSS变量
• Flexbox布局
• grid布局（非必须，可以替代）

因此，本案例只在现代浏览器中运行良好。

2.核心原理

我们利用Flexbox的方式打破表格布局，让表格做Flex容器(container)，每一行做Flex子项(item)，然后利用CSS变量的方式设置order。

.table-body {
  display: flex;
  flex-direction: column;
}

.table-row {
  order: calc(var(--order) * var(--sort-order, -1));
}

另外，为了实现纯CSS，我们用到了input的:checked伪类模拟实现单击。

#sort-by-published:checked ~ .table > .table-body > .table-row {
  --order: var(--order-by-published);
}

#sort-by-views:checked ~ .table > .table-body > .table-row {
  --order: var(--order-by-views);
}

#sort-ascending:checked + .table {
  --sort-order: 1;
}

3.实现步骤

3.1 HTML

为了实现单击，我们使用input+label的方式调用:checked伪类。首先，我们需要两组input。

然后是label。

    

      

        

          文章
          ↓
          ↑
        
        

          出版
          ↓
          ↑
        
        

          浏览
          ↓
          ↑
        
      
    
    

    
  

接下去是表格主题内容。

   
      
        Conditions for CSS Variables
        2016-10-21
        10 368
      
      
        Controlling the Specificity
        2016-12-21
        2 431
      
      
        Counters and Stones
        2018-01-04
        4 463
      
      
        Flexible Overflow
        2017-11-28
        6 585
      
      
        Keyboard-Only Focus
        2017-06-27
        4 597
      
      
        Label-to-Input States
        2017-05-31
        2 829
      
    

3.2 CSS

/* 关键代码 */

.table-body {
  display: flex;
  flex-direction: column;
}

.table-row {
  order: calc(var(--order) * var(--sort-order, -1));
}

#sort-by-published:checked ~ .table > .table-body > .table-row {
  --order: var(--order-by-published);
}

#sort-by-views:checked ~ .table > .table-body > .table-row {
  --order: var(--order-by-views);
}

#sort-ascending:checked + .table {
  --sort-order: 1;
}

/* 反向排序 */
#sort-by-name:checked ~ #sort-ascending:checked + .table > .table-body {
  flex-direction: column-reverse;
}

以及其他布局和样式方面的代码

/* 其他代码 */

.table-wrapper > input {
  position: fixed;
  left: 0;
  right: 0;
  clip: rect(1px,1px,1px,1px);
  visibility: hidden;
}

.table,
.table-caption,
.table-head {
  display: block;
  margin: 0;
}

table,td,th{
  border: 1px solid #000;
  border-collapse:collapse;
}

a{
  text-decoration: none;
  color:black;
}

.table-row {
  position: relative;
  display: grid;
  grid-template-columns: 50% 25% 25%;
}

.table-cell {
  text-align: right;
  padding: 0.25em 0.5em;
  white-space: nowrap;
}

.table-cell:first-child {
  text-align: left;
  overflow: hidden;
  text-overflow: ellipsis;
}

.table-orderer {
  display: none;
}

.table-head .table-cell {
  position: relative;
  display: flex;
  user-select: none;
}

.table-head .table-cell:hover {
  background: rgba(0,0,0,0.05);
}

.table-head .table-cell:not(:first-child) {
  flex-direction: row-reverse;
}

.table-sorter:before,
.table-orderer:before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  cursor: pointer;
}

#sort-by-name:checked ~ .table .table-sorter[for=sort-by-name] ~ .table-orderer,
#sort-by-published:checked ~ .table .table-sorter[for=sort-by-published] ~ .table-orderer,
#sort-by-views:checked ~ .table .table-sorter[for=sort-by-views] ~ .table-orderer {
  display: inline;
}

#sort-ascending:checked + .table .table-orderer[for=sort-ascending],
#sort-ascending:not(:checked) + .table .table-orderer[for=sort-descending] {
  display: none !important;
}

3.3 整体源码

    
        
        
        
    
    
        

            
            
            
            
            
            
            

                

                    

                        

                            文章
                            ↓
                            ↑
                        
                        

                            出版
                            ↓
                            ↑
                        
                        

                            浏览
                            ↓
                            ↑
                        
                    
                
                

                    

                        
Conditions for CSS Variables
                        
2016-10-21
                        
10 368
                    
                    

                        
Controlling the Specificity
                        
2016-12-21
                        
2 431
                    
                    

                        
Counters and Stones
                        
2018-01-04
                        
4 463
                    
                    

                        
Flexible Overflow
                        
2017-11-28
                        
6 585
                    
                    

                        
Keyboard-Only Focus
                        
2017-06-27
                        
4 597
                    
                    

                        
Label-to-Input States
                        
2017-05-31
                        
2 829
                    
                
            
        
    

4.声明

爱前端，乐分享。FedFun希望与您共同进步。
欢迎任何形式的转载，烦请注明装载，保留本段文字。
独立博客http://whqet.github.io
极客头条http://geek.csdn.net/user/publishlist/whqet
CSDN博客http://blog.csdn.net/whqet/
我的https://www.jianshu.com/u/c11d4318b3c7