el-calendar thead位置调整
时间: 2023-06-30 15:26:53 浏览: 59
要调整`el-calendar`组件的头部位置,可以使用CSS样式来实现。具体的方法是通过设置`thead`元素的`position`属性为`absolute`,并且设置其`top`和`left`属性来控制其在浏览器中的位置。例如,可以使用以下的CSS代码来将`el-calendar`的头部位置向下移动30像素:
```css
.el-calendar table thead {
position: absolute;
top: 30px;
left: 0;
}
```
你可以根据需要调整`top`属性的值来控制头部的位置。
相关问题
.el-table thead 添加 外box-shadow失效,可以添加内box-shadow
根据提供的引用内容,可以得出以下结论:
在.el-table thead元素上添加外部阴影时,由于.el-table thead元素的子元素被设置为position:sticky,因此外部阴影会被隐藏。但是,可以在.el-table thead元素内部添加内部阴影。
以下是一个示例代码,演示如何在.el-table thead元素内部添加内部阴影:
```css
.el-table thead {
box-shadow: inset 0 -2px 6px rgba(0, 0, 0, 0.3);
}
```
el-table横竖表头
el-table组件可以通过设置表头的slot来实现横向表头,也可以通过设置column的属性来实现纵向表头。
横向表头的实现方式:
```html
<el-table>
<el-table-column label="姓名" prop="name"></el-table-column>
<el-table-column label="年龄" prop="age"></el-table-column>
<el-table-column label="地址" prop="address"></el-table-column>
<template slot="header">
<thead>
<tr>
<th rowspan="2">姓名</th>
<th colspan="2">基本信息</th>
</tr>
<tr>
<th>年龄</th>
<th>地址</th>
</tr>
</thead>
</template>
</el-table>
```
纵向表头的实现方式:
```html
<el-table :data="tableData" style="width: 100%">
<el-table-column label="日期" width="180">
<el-table-column label="上午" align="center">
<el-table-column label="9:00-10:00" prop="am9"></el-table-column>
<el-table-column label="10:00-11:00" prop="am10"></el-table-column>
<el-table-column label="11:00-12:00" prop="am11"></el-table-column>
</el-table-column>
<el-table-column label="下午" align="center">
<el-table-column label="1:00-2:00" prop="pm1"></el-table-column>
<el-table-column label="2:00-3:00" prop="pm2"></el-table-column>
<el-table-column label="3:00-4:00" prop="pm3"></el-table-column>
</el-table-column>
</el-table-column>
<el-table-column label="姓名" prop="name"></el-table-column>
<el-table-column label="地址" prop="address"></el-table-column>
</el-table>
```
注意:纵向表头需要在第一列设置el-table-column组件的label属性,并将子列作为其子元素,子列也需要设置label属性。
相关推荐
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)