Question

如何使对角线标签文字对齐：正确无论标签多长，最后一个字母应该绑在'th'元素的底部，我试图添加更多负边距 - 顶部，但这只能解决溢出问题，我也不确定标签需要多长时间才能成为动态解决方案

th[class='special'] span {
    margin-top: -40px;  // no good, we don't know how 
    // long a label could be and this doesnt align the 
    // text to the right (th bottom)
}

Answer 1

您可以尝试使用跨度上的绝对位置，并将文本方向设置为“从右向左”，因此它始终从底部/右侧渲染。

<强> JsFiddle Demo

th[class='special'] {
    width: 40px;
    position: relative;
}
th[class='special'] span {
    position: absolute;
    bottom: 0;
    direction: rtl;
}

* {
    margin: 0;
    padding: 0;
    text-align: left;
}
table {
    margin-top: 50px;
    width: 100%;
}
table tr, table th, table td {
    border: 1px solid #e1e1e1;
}
th[class='special'] {
    width: 40px;
    position: relative;
}
th[class='special'] span {
    /* margin-top: -10px; */
    /* margin-left: -10px; */
    
    position:absolute;
    bottom:0;
    direction: rtl;
    
    width: 28px;
    white-space: nowrap;

    display: block;
    /*Firefox*/
    -moz-transform: rotate(45deg);
    /*Safari*/
    -webkit-transform: rotate(45deg);
    /*Opera*/
    -o-transform: rotate(45deg);
    /*IE*/
    writing-mode: tb-rl;
    filter: flipv fliph;
}

<table>
    <thead>
        <tr>
            <th>Hello</th>
            <th class="special"><span>Foo</span></th>
            <th class="special"><span>Foobar</span></th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>World</td>
            <td>Yes</td>
            <td>No</td>
        </tr>
    </tbody>
</table>

CSS3对角线旋转文本对齐

1 个答案: