CSS垂直列样式

Question

所以我想创建一个简单的网格。这是我的页面的CSS样式：

.tg  {border-collapse:collapse;
    border-spacing:0;
    }


.tg td{font-family:Arial, sans-serif;
    font-size:12px;
    font-weight:normal;
    padding:5px 5px;
    border-width:1px;
    overflow:hidden;
    background-color: gainsboro;}

.tg th{font-family:Arial, sans-serif;
    font-size:12px;
    font-weight:normal;
    padding:5px 5px;
    border-width:0px;
    overflow:hidden;
    overflow:hidden;
    white-space: nowrap;
    text-align:right;}

.occu {border-collapse:collapse;
    border-spacing:0;}

.occu th {
    font-family:Arial, sans-serif;
    font-size:12px;
    font-weight:normal; 
    height:500px;
    white-space: nowrap;
    overflow:hidden;
    bottom: 2px;
    vertical-align:bottom;}

.occu th > div { transform: rotate(270deg);
width:20px;
    text-align:left;}

.occu th > div > span { border-bottom: 1px solid #ccc;padding: 5px 10px;  }

我有一个单独的列标题类，因为这是我可以按照我希望的方式对齐列名称的唯一方法。这就是它的外观

我现在要做的是通过从db中检索每列的值来调整列宽。我能够为行而不是列执行此操作。即使我手动尝试使用css调整列的大小，它也是如此。

部分写作被削减，我不知道为什么。似乎没什么用。 有人可以帮帮我吗？