html – 使用“transform：rotate”内容减小TH的宽度,以避免浪费空间

2019年8月4日 327次阅读

我旋转了TH内容,以便为我的表格提供垂直边标题.

效果在这里可见：

http://jsfiddle.net/vuCzZ/

基本上是通过这个css进行旋转：

th
{
    width:20px;
    vertical-align:middle;
}

th div
{
    transform:rotate(-90deg);
}

我也想缩小TH宽度以避免浪费空间,但宽度：20px不起作用beacuse少于单词“Heading”的宽度(我知道transform：rotate()只有一个“视觉效果”但是ojects继续填补原始空间,如位置：相对概念).

请问,如何将TH宽度降至最低？

谢谢

最佳答案 编辑：保持单元格中旋转文本的垂直居中：

DEMO

CSS：

td, th {
    border:solid 1px red;
    vertical-align:middle;
}
th {
    width:1.6em;
}
th div {
    -webkit-transform:rotate(-90deg) translate(-50%, 0);
    transform:rotate(-90deg) translate(-50%, 0);
    transform-origin:0 0;
    -webkit-transform-origin:0 0;
    position:absolute;
}

你可以使用position：absolute;和transform-origin属性：

DEMO

CSS：

td, th {
    border:solid 1px red;
    vertical-align:middle;
}
th {
    width:20px;
    position:relative;
}
th div {
    position:absolute;
    bottom:-0.6em;
    -webkit-transform:rotate(-90deg);
    transform:rotate(-90deg);
    -webkit-transform-origin:0 0;
    transform-origin:0 0;
}
点赞