傾斜列標題

Question

我想建立一個傾斜的列標題表，如下圖所示。

但我不能將傾斜的標題div與實際列對齊，並且文本溢出列標題。 here是我的代碼的鏈接。

我的問題是我們如何將傾斜的列標題與它下面的列對齊幷包含其中的文本？

這裏是我下面的代碼

<table> 
<tr> 
<td> 
    <div class="outerDiv"> 
     <div class="innerDiv">This is first column header </div> 
    </div> 
</td> 
<td> 
    <div class="outerDiv"> 
     <div class="innerDiv">This is second column header</div> 
    </div>  
</td> 
<td> 
    <div class="outerDiv"> 
     <div class="innerDiv">This is third column header</div> 
    </div> 
</td> 
</tr> 
    <tr> <td> 1 </td> <td> 2 </td> <td> 3 </td> </tr> 
    <tr> <td> 4 </td> <td> 5 </td> <td> 6 </td> </tr> 
    <tr> <td> 7 </td> <td> 8 </td> <td> 9 </td> </tr> 
    <tr> <td> 10 </td> <td> 11 </td> <td> 12 </td> </tr> 
</table> 

CSS：

.outerDiv { 
background: grey; 
height: 200px; 
width: 100px; 
border: 1px solid black; 
transform: skew(-30deg); 
} 

body, html { 
height: 100%; 
} 

.innerDiv{ 
transform:skew(45deg); 
writing-mode: vertical-lr; 
} 

body { 
display: flex; 
justify-content: center; 
} 

table { 
border-collapse: collapse; 
} 

table, td, th { 
border: 1px solid black; 
} 

Answer 1

你可以使用writing-mode，僞元素，transform有的tunning與margin S：

table { 
 
    margin-right: 6em; 
 
} 
 

 
th { 
 
    padding: 0; 
 
    position: relative 
 
} 
 

 
th>div { 
 
    white-space:nowrap; 
 
    margin: -1em -2em -1em 6em;/* tune this to your needs, you might also see & update transform-origin */ 
 
    padding: 0; 
 
    -webkit-writing-mode: vertical-lr; 
 
    /* old Win safari */ 
 
    writing-mode: vertical-lr; 
 
    writing-mode: tb-lr; 
 
    transform: scale(-1, -1) rotate(45deg); 
 
} 
 

 
th:before { 
 
    position: absolute; 
 
    content: ''; 
 
    top: 0; 
 
    left: 0; 
 
    right: 0; 
 
    bottom: 0; 
 
    border: solid; 
 
    transform: skew(-45deg); 
 
    transform-origin: bottom left; 
 
} 
 

 
td { 
 
    border: solid; 
 
}

<table> 
 
    <tr> 
 
    <th> 
 
     <div class="innerDiv"> first </div> 
 
    </th> 
 
    <th> 
 
     <div class="innerDiv">This is second column header</div> 
 
    </th> 
 
    <th> 
 
     <div class="innerDiv">This is third header</div> 
 
    </th> 
 
    </tr> 
 
    <tr> 
 
    <td> 1 </td> 
 
    <td> 2 </td> 
 
    <td> 3 </td> 
 
    </tr> 
 
    <tr> 
 
    <td> 4 </td> 
 
    <td> 5 </td> 
 
    <td> 6 </td> 
 
    </tr> 
 
    <tr> 
 
    <td> 7 </td> 
 
    <td> 8 </td> 
 
    <td> 999999999999999 </td> 
 
    </tr> 
 
    <tr> 
 
    <td> 10 </td> 
 
    <td> 11 </td> 
 
    <td> 12 </td> 
 
    </tr> 
 
</table>

http://codepen.io/gc-nomade/pen/xqdNGN

Answer 2

這是另一個嘗試。我將標題單元格更改爲th。我添加了一個translateX來使它更好地排隊。對於內部的開發者來說，我倒過來扭曲它，所以文本看起來並不好笑，然後旋轉了容器，所以它仍然在容器後面傾斜。還增加了一些定位讓它看起來正確。

https://jsfiddle.net/b1mrksou/3/

的CSS我說：

* { 
    box-sixing: border-box; 
} 

.outerDiv { 
    background: grey; 
    height: 200px; 
    width: 100px; 
    border: 1px solid black; 
    border-bottom: 0; 
    border-left: 0; 
    transform: skew(-30deg) translateX(58%); 
} 

th:first-child .outerDiv { 
    border-left: 1px solid black; 
    position: relative; 
} 

.innerDiv { 
    position: absolute; 
    width: 250px; 
    height: 85px; 
    bottom: -34%; 
    left: 10px; 
    transform: skew(30deg) rotate(-60deg); 
    transform-origin: 0 0; 
    text-align: left; 
}