格式表标题

我有一个在标题行中倾斜文本的表，唯一的问题是文本仍然会使列的宽度变大。有什么办法可以将表格列压缩在一起，使它们与选择框的宽度一致吗？或者有没有办法将文本放在标题中，也许只是使用<div>或<p>？格式表标题

这里是我一起工作的小提琴： http://jsfiddle.net/t9Krg/1/

.slanted { 

    -webkit-transform: rotate(-45deg); 
    -moz-transform: rotate(-45deg); 
    -ms-transform: rotate(-45deg); 
    -o-transform: rotate(-45deg); 
    transform: rotate(-45deg); 


    white-space:nowrap; 
    /* 
    display:noblock; 
    */ 
}

周围的头房客仅仅是看到额外的空格和稍后将删除。

来源

2013-11-04 Ryan Erb

我不明白你想要什么？ – Liam

列的宽度是宽的方式，我想他们关于选择框的宽度。 –

如果使用绝对定位，你可以将物体在页面上您想要的位置。但为了使它们相对于表正确定位，需要将相对定位应用于其父元素。

因此，对于这个标记：

<th class="slanted"> 
    <div>This is a heading</div> 
</th>

你的CSS应该是这个样子：

.slanted { 
    text-align:left; 
    position:relative; 
    white-space:nowrap; 
} 

.slanted div { 
    width:12em; 
    position:absolute; 
    top:4em; 
    left:-1em; 
    transform: rotate(-45deg); 
}

你必须调整的top和left值来获得正确的事情，但它不该只要你不打算在你的标签上换行，就不会太困难。

Link to JSFiddle

来源

2013-11-04 15:51:15

太棒了！谢谢！ –