html - 倾斜的列标题

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

这是另一个尝试。我将标题单元格更改为 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;
}