格式表標題

我有一個在標題行中傾斜文本的表，唯一的問題是文本仍然會使列的寬度變大。有什麼辦法可以將表格列壓縮在一起，使它們與選擇框的寬度一致嗎？或者有沒有辦法將文本放在標題中，也許只是使用<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

太棒了！謝謝！ –