移动端表格自适应宽度，图片自适应宽度，微信小程序rich-text富文本

项目中遇到了，自适应宽度的问题。

图片自适应宽度在，这篇文章里已经介绍了。

https://blog.csdn.net/FansUnion/article/details/86563499

今天，又遇到1个表格自适应宽度的问题。

 

问题过程：

PC端，富文本编辑用KindEditor，保存html内容到数据库。

Web端展示，看着没问题。

移动端，比如微信小程序里，屏幕宽度不够，表格或图片，只看到一半。

 

解决办法是，修改html中的img和table的width style等属性。

table-layout: fixed; width=100%

代码中的注释已经很详细了，用到了jsoup和1个小技巧。

package com.jiutianniao.common.web.kit;

import org.apache.commons.lang3.StringUtils;
import org.jsoup.Jsoup;
import org.jsoup.nodes.Document;
import org.jsoup.nodes.Element;
import org.jsoup.select.Elements;

public class MobileKit {

	//图片自适应宽度，1个大图，在手机端也能够完全展示出来
	//https://blog.csdn.net/FansUnion/article/details/86563499
	public static String handleImageWidth(String content){
		if(StringUtils.isEmpty(content)){
			return content;
		}
		String contentAfterImg= content.replaceAll("

 

 

非自适应的表格

 

自适应的表格

 

参考文章

https://www.cnblogs.com/lxwphp/p/10077441.html

https://www.cnblogs.com/zhaojieln/p/4211391.html

https://blog.csdn.net/FansUnion/article/details/86563499

https://www.cnblogs.com/jycboy/p/jsoupdoc.html