带垂直割台的桌子（可排序）

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在客户端上执行此操作，或者通过您用于生成页面的任何编程语言在服务器端执行此操作。