Vue3 table td设置 背景色, border不见了

Question

table td设置 背景色, border不见了

于是 background 注掉

    <td class="table-cell" v-for="(i, index) in item" :key="index" :style="{
            // 'backgroundColor': i.attr.background_color, //这里不注掉 边框不出来
            'overflow': 'hidden',
            'border-left': i.attr.border?.left.width ? i.attr.border?.left.width + ' ' + i.attr.border?.left.style + ' ' + i.attr.border?.left.color : '',
            'border-right': i.attr.border?.right.width ? i.attr.border?.right.width + ' ' + i.attr.border?.right.style + ' ' + i.attr.border?.right.color : '',
            'border-top': i.attr.border?.top.width ? i.attr.border?.top.width + ' ' + i.attr.border?.top.style + ' ' + i.attr.border?.top.color : '',
            'border-bottom': i.attr.border?.bottom.width ? i.attr.border?.bottom.width + ' ' + i.attr.border?.bottom.style + ' ' + i.attr.border?.bottom.color : ''
          }">

背景不见了,边框也出来了

我新建一个 table 测试, 边框与背景可以同时存在. 这是啥梗

Answer 1

table-cell添加background-clip:padding-box;样式试试。

html td无边框颜色,table的td设置背景颜色后边框框消失_PraiseSunMan的博客-CSDN博客 表格Table的Th Td标签在设置背景颜色后，设置的边框消失了，出现此情况主要是因为 【background】属性 与 【position:relative;】同时使用的缘故。解决方法：对Th Td 标签增加【background-clip:padding-box;】样式属性即可解决，具体整理如下：.TestTable4{width:200px;border-collapse:collapse;... https://blog.csdn.net/weixin_29706315/article/details/117988969