页面table的tr中有img后空行解决办法--处理记录

页面table的tr中有img后空行解决办法--处理记录

     

 

     今天处理页面时碰到了table中的img后老有空行,代码表面上没有问题,特征如下:

  页面:

图片

  html:

<table width="210" border="0" cellspacing="0" cellpadding="0">    

       <tr>      

            <td>       

                     <img src="images/home_login_boxtop.jpg" width="210" height="27" />       

          </td>    

      </tr>

经过一番挣扎,发现了解决办法:

 

修改html如下:

<table width="210" border="0" cellspacing="0" cellpadding="0">    

            <tr>      

                <td><img src="images/home_login_boxtop.jpg" width="210" height="27"></td>    

           </tr>

页面:

 

就解决了,可能是由于img之后又空格或换行导致的,在此记录下!

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
在 `el-table` 中使用 `v-html` 渲染后,可以通过在 `cell-class-name` 属性中自定义样式,然后通过 `render` 函数获取当前单元格中的 `img` 标签,并进行判断。 具体实现步骤如下: 1. 在 `el-table` 中使用 `cell-class-name` 属性,自定义单元格的样式类名。 2. 在 `render` 函数中,获取当前单元格中的 `img` 标签,并进行判断。 以下是一个示例代码: ```html <template> <el-table :data="tableData" style="width: 100%"> <el-table-column prop="content" label="内容" :cell-class-name="getCellClassName"> </el-table-column> </el-table> </template> <script> export default { data() { return { tableData: [ { content: '<p>这是一段包含<img src="xxx" alt="图片描述">图片的文本</p>' } ] } }, methods: { getCellClassName({ row, column, rowIndex, columnIndex }) { return 'my-cell-class' } }, render: function(h, { row, column, rowIndex, columnIndex }) { if (columnIndex === 0) { const htmlStr = row[column.property] const div = document.createElement('div') div.innerHTML = htmlStr const imgList = div.querySelectorAll('img') imgList.forEach(img => { if (img.alt === '图片描述') { // 图片描述为"图片描述"的处理逻辑 } }) return h('div', htmlStr) } } } </script> <style> .my-cell-class { padding: 0 !important; /* 去除单元格内边距 */ } .my-cell-class > div { padding: 10px; /* 设置单元格内边距 */ } </style> ``` 在上面的代码中,我们在 `getCellClassName` 方法中返回了自定义的样式类名 `my-cell-class`,并在样式中设置了 `padding: 0 !important` 去除单元格内边距,然后在 `render` 函数中获取当前单元格的 `htmlStr`,并使用 `querySelectorAll` 方法获取其中的 `img` 标签,进行判断。最后,使用 `h` 函数生成一个新的 `div` 元素,并将 `htmlStr` 作为其子元素返回。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值