为什么Table 的border 一边不显示,请教!

Question

为什么我的表格, 左边的线不显示
浅灰的线是外联样式
绿色的线是内联样式 (同时也有外联样式的边框线)
难道是受到外联样式影响??

// 这里是绿色的 边框线的样式
    <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 : ''
          }">

查看,不显示左边线 td 元素. 控制台显示 有'border-left'这个属性 设置

同时请教, 表格是一个二维数组, 这种通过读取数组对象,获取样式, 有没有更合理的写法?

Answer 1

因为设置了合并表格线 border-collapse: collapse;,每个td只有右边和下边的边框线,左边和上边的边框线呈现的是相邻左边和上边单元格td的边框线
所以设置左边和上边的边框线是没有用的,并且这个规则是固定的,不受css内联外联优先级的影响
设置border-collapse: collapse后合并表格线规则为
1, border-style = [hidden|none]
hidden的优先级是最高的，当两个边框产生聚合时，只要任意一个设置了hidden，则最终结果是不显示任何边框；none的优先级是最低的，只要任意一个设置none，就直接以另一个为结果。
正常情况下border-style: hidden 和 border-style: none 都是不显示边框，当当border-collapse: collapse的时候就有区别了。

2, border-width不一致的情况下，以border-width大的为主
3, border-style≠[hidden|none] 并且 border-width一致的情况下，以这个优先顺序：'double', 'solid', 'dashed', 'dotted', 'ridge', 'outset', 'groove', 'inset'.
4, 当边框仅仅是color不一样的时候：就按照dom层级结构来了，子element的border样式优于父element的border样式。[cell > row > rowgroup > table]；如果层级结构是兄弟关系，以表格是ltr为例，左边、上边优先。