grid布局实现表格无重叠边框

最新推荐文章于 2024-05-21 23:21:19 发布

BUG何处藏

最新推荐文章于 2024-05-21 23:21:19 发布

阅读量423

点赞数 7

文章标签：前端 javascript html

本文链接：https://blog.csdn.net/weixin_45847765/article/details/136557978

版权

<template>
    <div class="right-main">
          <div>样品编号</div>
          <div>WY220028</div>
          <div>检验项目名称</div>
          <div>脂肪酸值</div>
    </div>
</template>
<style lang="less" scoped>
     .right-main{
         display: grid;
         grid-template-columns: 30% 70%;
         grid-template-rows: repeat(2, 2.5rem);
         div{
            border: 1px solid #e5e4e9;
            margin-left: -1px;
            margin-top: -1px;    
        }
    }
}
</style>

遇到边框重叠问题就可以通过margin移动边框宽度使之覆盖来解决