css - 自动展开旋转列 CSS

Question

当有更多文本时，我正在尝试自动扩展旋转的列。

我尝试了各种 css，例如删除 tranform-origin 或使用 translateX(-50%) translateY(-50%) rotate(-90deg); 选项。

我想知道我是否遗漏了什么？

下面的代码示例是我正在处理的。

.tcentre {
  text-align: center;
}


/*Events Matrix*/

.matrix table,
.matrix td,
.matrix th {
  border-spacing: 0;
  border: 1px solid;
  text-align: left
}

.matrix .vert>th:nth-child(1n+3) {
  position: relative;
  height: 150px;
  min-width: 40px;
  padding: 4px;
}

.matrix .vert>th {
  overflow: hidden;
}

.matrix .vert>th>div>div {
  height: 100%;
  line-height: 18px;
  width: 150px;
  position: absolute;
  bottom: -145px;
  /*border: 1px solid blue; */
  transform: rotate(-90deg);
  transform-origin: top left;
}

.matrix .tbottom {
  vertical-align: bottom !important;
  text-align: left !important;
}

<DIV id="content" class="matrix">
  <table>
    <thead>
      <tr class="vert">
        <th class="tbottom" style="Width: 100px;">Part</th>
        <th class="tbottom" style="Width: 100px;">Name</th>
        <th style="Width: 20px;">
          <div>
            <div>Park<br>2018-08-12</div>
          </div>
        </th>
        <th style="Width: 20px;">
          <div>
            <div>War Memorial Lots more text in this cell<br>2018-08-19</div>
          </div>
        </th>
        <th style="Width: 20px;">
          <div>
            <div>Charity Collection<br>2018-10-13</div>
          </div>
        </th>
        <th style="Width: 20px;">
          <div>
            <div>Concert<br>2018-10-28</div>
          </div>
        </th>
        <th style="Width: 20px;">
          <div>
            <div>Remembrance<br>2018-11-10</div>
          </div>
        </th>
      </tr>
      <tr>
        <td class="nowrap">Score</td>
        <td class="nowrap">Person 1</td>
        <td class="tcentre colour-Y">Y</td>
        <td class="tcentre colour-Y">Y</td>
        <td class="tcentre colour-Y">Y</td>
        <td class="tcentre colour-Y">Y</td>
        <td class="tcentre colour-Y">Y</td>
      </tr>
      <tr>
        <td class="nowrap">Solo Cornet</td>
        <td class="nowrap">Person 2</td>
        <td class="tcentre colour-Y">Y</td>
        <td class="tcentre colour-" />
        <td class="tcentre colour-" />
        <td class="tcentre colour-" />
        <td class="tcentre colour-" />
      </tr>
    </thead>
  </table>
</Div>

标签： csshtml-table