css使用表格如果使得无数据的图片在表格内上下左右都居中
<template>
<div class="container">
<table>
<thead>
<tr>
<th>序号</th>
<th>标题1</th>
<th>标题2</th>
<th>标题3</th>
<th v-for="i in 30">
{{ i + i + i }}qqq
</th>
</tr>
</thead>
<tbody>
{ d + d + d }}
-->
</tbody>
<tfoot>
<td colspan="34">
<a-empty />
</td>
</tfoot>
</table>
</div>
</template>
<script>
import { defineComponent, ref, reactive } from 'vue';
export default defineComponent({
setup() {
return {
};
},
});
</script>
<style scoped lang="scss">
.container {
width: 98%;
height: calc(100vh - 20px);
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
overflow: scroll;
}
table {
table-layout: fixed;
border: none;
border-collapse: separate;
border-spacing: 0;
background: white;
text-align: center;
thead {
tr {
color: white;
height: 70px;
th {
background-color: #CCE8EB;
min-width: 100px;
position: -webkit-sticky;
position: sticky;
top: 0;
z-index: 3;
border: 1px solid #fff;
border-top: 1px solid #fff;
/*--新增--*/
border-bottom: 1px solid #fff;
/*--新增--*/
border-right: 1px solid #fff;
/*--新增--*/
}
th:nth-of-type(1) {
background-color: #269191;
left: 0;
z-index: 4;
}
th:nth-of-type(2) {
background-color: #269191;
left: 100px;
z-index: 4;
}
th:nth-of-type(3) {
background-color: #269191;
left: 200px;
z-index: 4;
}
th:nth-of-type(4) {
background-color: #269191;
left: 300px;
z-index: 4;
}
}
}
tbody {
tr {
height: 50px;
color: green;
td {
border-bottom: 1px solid #f00;
/*--新增--*/
border-right: 1px solid #f00;
/*--新增--*/
min-width: 100px;
position: -webkit-sticky;
position: sticky;
border: 1px solid red;
}
td:nth-of-type(1) {
background-color: #CCE8EB;
font-weight: bold;
left: 0;
z-index: 3;
}
td:nth-of-type(2) {
background-color: #CCE8EB;
left: 100px;
z-index: 3;
}
td:nth-of-type(3) {
background-color: #CCE8EB;
left: 200px;
z-index: 3;
}
td:nth-of-type(4) {
background-color: #CCE8EB;
box-shadow: 5px 5px 5px #0078A855;
left: 300px;
z-index: 3;
}
}
}
}
</style>