1200字范文,内容丰富有趣,写作的好帮手!
1200字范文 > vue table自定义样式

vue table自定义样式

时间:2021-07-03 06:27:45

相关推荐

vue table自定义样式

工作常见通用table自定义样式

HTML代码块:

<div class="detail-group-box"><div class="detail-group-title"><img :src="require('@/assets/images/line.png')"><span>xx信息</span></div><el-row :gutter="14"><el-col :span="24"><div class="custom-table-info"><table class="custom-table" v-loading="authLoading"><tr><td class="custom-table-head"><span>xx状态</span></td><td class="custom-table-head"><span>发起时间</span></td><td class="custom-table-head"><span>xx时间</span></td></tr><tr><td class="custom-table-td"><span>xx</span></td><td class="custom-table-td"><span>xx</span></td><td class="custom-table-td"><span>xx</span></td></tr></table></div></el-col></el-row></div>

style代码块:

<style scoped lang="scss">.detail-current-car {margin-bottom: 12px;}.detail-group-box {.detail-group-title {font-size: 14px;font-weight: 400;color: #333333;line-height: 20px;margin-bottom: 12px;img {vertical-align: -2px;width: 3px;height: 15px;margin-right: 5px;}}.detail-item-box {display: flex;border: 1px solid #F0F0F0;border-right: none;max-width: 747px;margin-bottom: 20px;}.detail-item {display: flex;font-size: 14px;font-weight: 400;line-height: 42px;}.detail-item-title {width: 138px;padding-left: 20px;background-color: rgba(247, 248, 250, 0.7);border-radius: 3px 0px 0px 3px;color: #1D2129;border-right: 1px solid #F0F0F0;}.detail-item-info {color: #333841;width: 215px;margin-left: 20px;border-right: 1px solid #F0F0F0;}}.custom-table-info {.el-table {.cell {padding: 0 10px;}}}.custom-table {width: 100%;border-collapse: collapse;// border-bottom: 1px solid #F0F0F0;border-left: 1px solid #F0F0F0;margin-bottom: 30px;tr {height: 40px;}td {border-right: 1px solid #F0F0F0;border-top: 1px solid #F0F0F0;border-bottom: 1px solid #F0F0F0;}.custom-table-head {font-size: 16px;font-weight: 400;color: #909399;width: 140px;background-color: rgba(247, 248, 250, 0.7);padding-left: 20px;}.custom-table-td {width: 200px;font-size: 16px;font-weight: 400;color: #333333;padding: 10px 20px 10px;}.w180 {width: 180px;}}</style>

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。