javascript - 矩阵图 : unable to style rotated column names

Question

我想做的是创建一个矩阵，其中每个元素都是可点击的，javascript 给我点击的元素。我有这个 HTML
<table id="availability">
<tr>
<th class="lat-header rotate"></th>
<th class="rotate">Mattino</th>
<th class="rotate">Pomeriggio</th>
<th class="rotate">Sera</th>
<th class="rotate">Full-time</th>
</tr>
<tr id="day_[0]">
<th class="lat-header">Lun</th>
<td data-role="00"></td>
<td data-role="01"></td>
<td data-role="02"></td>
<td data-role="03"></td>
</tr>
<tr id="day_[1]">
<th class="lat-header">Mar</th>
<td data-role="10"></td>
<td data-role="11"></td>
<td data-role="12"></td>
<td data-role="13"></td>
</tr>
<tr id="day_[2]">
<th class="lat-header">Mer</th>
<td data-role="20"></td>
<td data-role="21"></td>
<td data-role="22"></td>
<td data-role="23"></td>
</tr>
</table>

然后这个 CSS:

table#availability {
    text-align:center;
    width:100%;
}
table#availability th, table#availability td {
    display: inline-block;
    width: 16%;
    height: 4em;
    padding: 0;
    margin: 5px;
    font-size: 12px;
    line-height:4em;
}
table#availability td {
    background-color: aqua;
    display: inline-block;
    transition: background-color ease 0.5s
}
table#availability td.cellSelected {
    background-color:#00ff00;
}
table#availability th.lat-header {
    width: 2em;
    text-align: right;
    position:relative;
    left:-1em;
}
table#availability th.rotate {
    /* Safari */
    -webkit-transform: rotate(-90deg);
    /* Firefox */
    -moz-transform: rotate(-90deg);
    /* IE */
    -ms-transform: rotate(-90deg);
    /* Opera */
    -o-transform: rotate(-90deg);
    /* Internet Explorer */
    filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
    text-align:left;
}    

最后这个小javascript:

var availMatrixArr = [];//array of clicked elements
jQuery('table#availability td').click(function(){
    var selElIndex = $(this).attr('data-role');
    var indexInArr = jQuery.inArray(selElIndex,availMatrixArr);
    if(indexInArr > -1){
        $(this).removeClass('cellSelected');
        availMatrixArr.splice(indexInArr,1);
    } else {
        availMatrixArr.push(selElIndex);
        $(this).addClass('cellSelected');
    }
    console.log(selElIndex);
    console.log(availMatrixArr);
});   

问题是，当屏幕调整大小时，我希望与底部对齐的列标题会改变它们相对于表格的位置，因此我的代码可以适用于每个屏幕尺寸。这是我的JsFiddle .
如果您尝试调整 fiddle 中“结果”方 block 的大小，您就会明白我的意思。

Answer 1

您可以尝试像这样编辑您的 html:

  <tr>
    <th class="lat-header rotate"></th>
    <th><span class='rotate'>Mattino</span></th>
    <th><span class="rotate">Pomeriggio</span></th>
    <th><span class='rotate'>Sera</span>
    <th class="rotate"><span class='rotate'>Fulltime</span>
</tr>

然后像这样改变你的CSS

table#availability th .rotate {
    display:inline-block;
    width:60px;
    /* Safari */
    -webkit-transform: rotate(-90deg);
    /* Firefox */
    -moz-transform: rotate(-90deg);
    /* IE */
    -ms-transform: rotate(-90deg);
    /* Opera */
    -o-transform: rotate(-90deg);
    /* Internet Explorer */
    filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
    text-align:left;

}

在这里你可以看到一个有效的 fiddle