如何在HTML和CSS中实现表格的斜表头效果？

在HTML和CSS中实现斜表头效果通常通过`<thead>`元素结合伪元素`:before`和`:after`来创建。以下是一个基本的步骤：

1. 首先，在HTML中创建一个`<table>`标签，并在其中添加`<thead>`标签用于存放表头行。

<table>
  <thead>
    <tr>
      <th class="angled-header">常规标题</th>
      <!-- 其他表头单元格 -->
    </tr>
  </thead>
  <!-- 表体内容 -->
</table>

2. 然后，为斜表头添加样式，这需要用到CSS。给`.angled-header`选择器添加样式，比如使用绝对定位和旋转角度：

.angled-header {
  position: relative;
  /* 如果需要固定宽度 */
  width: 100px;

  /* 创建斜线效果 */
  padding-left: calc(50% - 5px); /* 计算偏移量 */
  transform: rotate(-45deg);
  background-color: #f2f2f2; /* 设置背景色 */
}

/* 可能需要清除默认边距和内边距，防止影响其他元素 */
.angled-header::before,
.angled-header::after {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 1px;
}

/* 斜线下拉部分 */
.angled-header::before {
  transform-origin: bottom right;
  border-right: 1px solid #ccc; /* 边框颜色 */
}

/* 斜线上升部分 */
.angled-header::after {
  transform-origin: top right;
  border-top: 1px solid #ccc;
}