mp-html表格无边框bug解决方法

原创于 2025-08-01 10:36:26 发布 · 133 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #mp-html

关键点说明

1. 使用tagStyle属性：直接为表格元素设置样式

2. border-collapse: collapse：确保边框正确合并

3. 为table、th、td分别设置边框：确保完整边框显示

<template>
  <mp-html 
    :content="content" 
    :tag-style="tagStyle"
    class="custom-mp-html" 
  />
</template>

<script>
export default {
  data() {
    return {
      content: '<table><tr><th>标题1</th><th>标题2</th></tr><tr><td>内容1</td><td>内容2</td></tr></table>',
      tagStyle: {
        table: 'border-collapse: collapse; width: 100%; margin: 20rpx 0; border: 1px solid #e0e0e0;',
        th: 'border: 1px solid #e0e0e0; padding: 16rpx 24rpx; text-align: left; background-color: #f5f5f5; font-weight: 600;',
        td: 'border: 1px solid #e0e0e0; padding: 16rpx 24rpx; text-align: left;'
      }
    }
  }
}
</script>