el-table 表格边框设置
<div class="bgtable">
<div class="tableTitle1">指标</div>
<div>
<el-table ref="table1" :data="planList1" height="calc(100vh * 350 / 1080)" size='mini'
class="commonScrollbarTable" :row-style="{ height: '0' }" :cell-style="{ padding: '0' }"
:header-cell-style="{ padding: '0', borderBottom: '1px solid #0b5394' }"
style="font-size: calc(100vw *21 / 1920);width:100%; color: #589fb8;text-align: center;margin-top: calc(100vh * 0 / 1080);margin-left: 0px;">
<el-table-column prop="Deptname" label='工厂' min-width="15%" text-align="center" sortable>
</el-table-column>
<el-table-column prop="Oee" label='OEE' min-width="10%" text-align="center" sortable>
<template v-slot="scope">
<p style="margin: 0px;">{{ scope.row.Oee }}%</p>
</template>
</el-table-column>
<el-table-column prop="Zengzhi" label='已上传model比例' min-width="25%" text-align="center" sortable>
</el-table-column>
<el-table-column prop="Modelqty" label='已维护SOT数量' min-width="25%" text-align="center" sortable>
</el-table-column>
<el-table-column prop="lastData.Recorddate" label='最后上传日期' min-width="25%" text-align="center" sortable>
<template v-slot="scope">
<p style="margin: 0px;">{{ scope.row.lastData.Recorddate.slice(0,10) }}</p>
</template>
</el-table-column>
</el-table>
</div>
</div>
.tableTitle1 {
color: #0b5394;
font-size: calc(100vw *16 / 1920);
font-weight: bold;
width: 100%;
height: calc(100vh * 40/ 1080);
line-height: calc(100vh * 40/ 1080);
text-align: left;
justify-content: left;
display: flex;
margin-left: 0px;
padding-left: 10px;
border: 1px solid #0b5394;
border-top-left-radius: 5px;
border-top-right-radius: 5px;
/* padding-top: calc(100vh * 10/ 1080); */
}
.el-table {
background-color: transparent !important;
/* border: 0px; */
--el-table-border-color: transparent;
border-right: 1px solid #0b5394;
border-bottom: 1px solid #0b5394;
border-bottom-left-radius: 5px;
border-bottom-right-radius: 5px;
/* border-left: 1px solid black; */
}
.el-table>>>tr {
background-color: transparent !important;
}
.el-table>>>th {
background-color: transparent !important;
text-align: center;
padding: 0px;
color: black;
black-space: pre-wrap;
/* font-weight: normal; */
font-size: calc(100vw *15 / 1920);
border: 1px solid #0b5394;
border-right: 0px;
border-top: 0px;
height: 40px !important;
}
/* 手动设置body偏移量 */
.el-table>>>.el-table__inner-wrapper{
margin-left: -1px !important;
}
.el-table>>>thead.is-group th {
background-color: #0b5394;
}
.el-table>>>td {
text-align: center;
background-color: transparent !important;
color: black;
text-align: center;
color: black;
justify-content: center;
black-space: pre-wrap;
border: 1px solid #0b5394;
border-right: 0px;
border-top: 0px;
font-size: calc(100vw *14 / 1920);
/* border-bottom: 1px solid #2e466d;
border-right: 1px solid #2e466d; */
}
.el-table>>>.cell {
line-height: calc(100vh *20 / 1080) !important;
padding: 0px 0px;
}
.el-table>>>th:first-child .cell {
padding-left: 0px;
padding-right: 0px;
}
.el-table>>>td:first-child .cell {
padding-left: 0px;
padding-right: 0px;
}
/* 修改鼠标hover变化的颜色 */
.el-table>>>tbody tr:hover>td {
background-color: transparent !important
}
.el-table>>>.el-progress-bar__innerText {
font-size: calc(100vw *10 / 1920);
/* vertical-align: center; */
line-height: 7px;
height: 14px;
}
/* 设置是否隐藏右侧滚动框 */
.commonScrollbarTable /deep/ .el-table__body-wrapper::-webkit-scrollbar {
width: 0px;
height: 10px;
display: none;
overflow: hidden;
}
/* table右侧横线设置 */
.el-table--border::after,
.el-table--group::after {
width: 0px;
}
/* table底部横线设置 */
.el-table::before {
left: 0;
bottom: 0;
width: 97%;
height: 0;
background-color: #0b5394;
}
/* 设置table的body和header宽度一致 */
.el-table>>>.el-table__header,
.el-table>>>.el-table__body,
.el-table>>>.el-table__footer {
width: 100% !important;
}
.firefox .el-table>>>.el-table__header colgroup col[name='gutter'] {
/* width: 0px !important; */
}
.other .el-table>>>.el-table__header colgroup col[name='gutter'] {
width: 0px !important;
}
原文地址：https://blog.csdn.net/lfl18326162160/article/details/144370075
免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！