使用旋转标题调整td的宽度

Question

我有一个使用javascript来显示或隐藏某些列的表。所有列标题都旋转了90度。

一切都在功能上有效，但有一个问题我无法弄清楚。 列的宽度应为20px。在实际旋转之前，列的宽度实际上等于div的宽度。

我尝试将tds内div的宽度调整为20px。在这种情况下，列的宽度正确调整为20px，但现在标题文本显示为截止。我试过通过设置溢出来补偿这个：可见;当列可见时，但这似乎改变了标题div的实际位置。知道如何让这个工作吗？

这里是代码（仅添加背景颜色以帮助可视化div相对于td的位置）。

function ShowHideMatrix() {
    var PrivCells = document.getElementsByClassName('PrivCol');
    var PrivMatrixCells = document.getElementsByClassName('PrivMatrixCol');

    for (var i = 0, iLen = PrivCells.length; i < iLen; i++) {
        if (PrivCells[i].style.height === '' || PrivCells[i].style.height != '0px') {
            PrivCells[i].style.height = '0px';
            PrivCells[i].style.width = '0px';
        } else {
            if(PrivCells[i].className.indexOf('PrivHead') > -1){
                PrivCells[i].style.height = '20px';
                PrivCells[i].style.width = '150px';
            } else {
                PrivCells[i].style.height = '20px';
                PrivCells[i].style.width = '20px';
            }
        }
    }
    
    for (var j = 0, iLen1 = PrivMatrixCells.length; j < iLen1; j++) {
        if (PrivMatrixCells[j].style.height === '' || PrivMatrixCells[j].style.height == '0px') {
            if(PrivMatrixCells[j].className.indexOf('PrivHead') > -1){
                PrivMatrixCells[j].style.height = '20px';
                PrivMatrixCells[j].style.width = '150px';
            } else {
                PrivMatrixCells[j].style.height = '20px';
                PrivMatrixCells[j].style.width = '20px';                
            }
        } else {
            PrivMatrixCells[j].style.height = '0px';
            PrivMatrixCells[j].style.width = '0px';
        }
    }
}

.PrivHead {
    /* Rotation */
    -ms-transform: rotate(90deg); /* IE9+ */
    -webkit-transform: rotate(90deg); /* Safari 3.1+, Chrome */
    -moz-transform: rotate(90deg); /* FF3.5+ */
    -o-transform: rotate(90deg); /* Opera 10.5 */
    transform: rotate(90.0deg); /* Standard */
    filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=0.083); /* IE6,IE7 */
    -ms-filter:"progid:DXImageTransform.Microsoft.BasicImage(rotation=0.083)"; /* IE8 */
    //transform-origin: center center;
    /* Text */
    overflow: hidden;
    font-family: Verdana, Arial, Helvetica;
    font-size: 10pt;
    font-weight: bold;
    //height: 20px;
    width: 150px;
    text-align: left;
    //position: relative;
}

.PrivCol {
    /* Transition */
    -webkit-transition: all 0.8s;
    -moz-transition: all 0.8s;
    -o-transition: all 0.8s;
    -ms-transition: all 0.8s;
    transition: all 0.8s;
    vertical-align: bottom;    
    text-align: left;
    overflow: hidden;
}
.PrivMatrixCol {
    /* Transition */
    -webkit-transition: all 0.8s;
    -moz-transition: all 0.8s;
    -o-transition: all 0.8s;
    -ms-transition: all 0.8s;
    transition: all 0.8s;
    
    width: 0px;
    overflow: hidden;
    margin: auto;
}

.PrivText{
    width: 100%;
}
table{
    width: 400px;
}
table, tr, td {
    border: 1px solid black;
    border-collapse: collapse;
    padding: 0;
    border-spacing: 0px;
}

<table id="Table0" style="margin-top: 100px;">
    <thead>
        <tr>
            <td colspan="4"> 
                    <button onclick="ShowHideMatrix()" href="">Matrix</button>
            </td>
        </tr>
    </thead>
    <tbody id="Body0">
        <tr>
            <td style="background-color: lightblue; height: 150px;">
                <div class="PrivHead PrivCol" style="background-color: lightgreen; width: 150px; position: relative;">Request</div>
            </td>
            <td style="background-color: lightblue; height: 150px;">
                <div class="PrivHead PrivCol" style="background-color: lightgreen; position: relative;">Recommend</div>
            </td>
            <td style="background-color: lightblue; height: 150px; width: 0px;">
                <div class="PrivHead PrivMatrixCol" style="background-color: lightgreen;">Demo</div>
            </td>
            <td></td>
        </tr>
        <tr>
            <td>
                <div class="PrivCol" style="text-align: center;">
                    <input type="Checkbox" checked="checked" />
                </div>
            </td>
            <td>
                <div class="PrivCol" style="text-align: center;">
                    <input type="Checkbox" />
                </div>
            </td>
            <td>
                <div class="PrivMatrixCol" style="text-align: center;">&#8226;</div>
            </td>
            <td>
                <div class="PrivText">Priv 2</div>
            </td>
        </tr>
    </tbody>
</table>

http://jsfiddle.net/namyzarc/qnfe3bde/