前端基础学习-element-ui表格表头做成斜线表头

最新推荐文章于 2024-06-12 17:47:13 发布

小夭。

最新推荐文章于 2024-06-12 17:47:13 发布

阅读量4.4k

点赞数 6

分类专栏：前端文章标签： html css vue

本文链接：https://blog.youkuaiyun.com/m0_47146037/article/details/112277144

版权

前端专栏收录该内容

56 篇文章

订阅专栏

这篇博客展示了如何通过CSS对二级表头进行样式修改，创建类似表头斜线的效果。HTML代码中定义了一个包含多个列的表格，而CSS部分通过选择器 `.el-table thead.is-group th` 等，利用伪元素和旋转技巧实现了斜线效果。这种方法适用于具有二级表头的表格，且需要注意CSS不应放在scope中。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

这部分代码样式部分参照表头斜线
首先上效果图
在这里插入图片描述
这里主要是针对二级表头对其样式进行选择修改，这里需要注意一定要是二级表头才能做出这样的效果

html代码

        <el-table  :data="slashList" border height="400">
          <el-table-column label="信息" show-overflow-tooltip width="140" align="right">
            <el-table-column prop="title" label="标题" show-overflow-tooltip width="120" align="left"></el-table-column>
          </el-table-column>
          <el-table-column prop="url" label="请求地址" show-overflow-tooltip></el-table-column>
          <el-table-column prop="name" label="操作人" show-overflow-tooltip></el-table-column>
          <el-table-column prop="date" label="时间" show-overflow-tooltip></el-table-column>
        </el-table>

这里的表格数据是通过mock模拟的，前面博文有说过，就不再赘述了
css代码
这部分主要参照了开头引入的链接，注意不要放在scope中

<style>
.el-table thead.is-group th {
  background: none;
}
.el-table thead.is-group tr:first-of-type th:first-of-type {
  border-bottom: none;
}
.el-table thead.is-group tr:first-of-type th:first-of-type:before {
  content: '';
  position: absolute;
  width: 1px;
  height: 100px;
  top: 0;
  left: 0;
  background-color: grey;
  opacity: 0.3;
  display: block;
  transform: rotate(-57deg);
  transform-origin: top;
}
.el-table thead.is-group tr:last-of-type th:first-of-type:before {
  content: '';
  position: absolute;
  width: 1px;
  height: 100px;
  bottom: 0;
  right: 0;
  background-color: grey;
  opacity: 0.3;
  display: block;
  transform: rotate(-56deg);
  transform-origin: bottom;
}
</style>