垂直ヘッダー付きテーブル（ソート可能）

Question

次のコードを使用して、並べ替え可能なヘッダー付き垂直テーブルに取り組んでいます。列は垂直ですが、ヘッダーをクリックするとどのように並べ替えることができます。

CSSコード：

<style> 
#tabs{ 

} 

#vartabs .ui-widget-header { 
    background-color: white; 
    background-image: none; 
    border-top: none; 
    border-right: none; 
    border-left: none; 
} 

#vartabs .ui-widget-content { 
    background-color: white; 
    background-image: none; 

} 

#vartabs .ui-corner-top,#tabs .ui-corner-bottom,#tabs .ui-corner-all{ 
    border-top-left-radius: 0px; 
    border-top-right-radius: 0px; 
    border-bottom-left-radius: 0px; 
    border-bottom-right-radius: 0px; 
} 



#vartabs .ui-state-default, 
#vartabs .ui-state-default a { 
    background-color: white; 
    text-align: center; 
} 

#vartabs .ui-state-default a { 
    width: herepx; 
} 


#vartabs .ui-tabs-active, 
#vartabs .ui-tabs-active a { 
    background-color: darkgray; 
    text-align: center; 

} 

</style> 


<style> 
    th.rotate { 
    /* Something you can count on */ 
    height: 140px; 
    white-space: nowrap; 
} 

th.rotate > div { 
    transform: 
    /* Magic Numbers */ 
    translate(0px, 51px) 
    /* 45 is really 360 - 45 */ 
    rotate(270deg); 
    width: 8px; 
} 
th.rotate > div > span { 
    border-bottom: 1px solid #ccc; 
    padding: 5px 10px; 
} 


table tbody 
{ 
    overflow: auto; 
    height: 10px; 
} 



.scroll { 
    max-height: 700px; 
    overflow: auto; 
} 
th 
{ 
    width: 72px; 
} 


</style> 

私はテーブルをソートするためのネット上の別のコードを見つけましたが、そのロジックが少し異なっているとして、コードにマージする少し難しいです。

Answer 1

テーブルをHTMLとCSSだけで並べ替えることはできません。 JavaScriptを使用してクライアント上で行うか、ページを生成するために使用しているプログラミング言語を使用してサーバー側で行う必要があります。