如何对角拆分表格标题单元格？

Question

我正在尝试创建一个表格，该表格的标题被分成 2 条，如下图所示。

我怎样才能做到这一点？

谢谢 ：）

Answer 1

.background {
  width: 100px;
  height: 50px;
  padding: 0;
  margin: 0;
}

.line {
  width: 112px;
  height: 47px;
  border-bottom: 1px solid red;
  transform: translateY(-20px) translateX(5px) rotate(27deg);
  position: absolute;
  z-index: -1;
}

.background>div {
  position: relative;
  height: 100%;
  width: 100%;
  top: 0;
  left: 0;
}

.bottom {
  position: absolute;
  bottom: 1px;
  left: 1px;
}

.top {
  position: absolute;
  top: 1px;
  right: 1px;
}

<table>
  <th class="background">
    <div><span class="bottom">First</span>
      <span class="top">Second</span>
      <div class="line"></div>
    </div>
  </th>
</table>