移动端表格自适应宽度，图片自适应宽度，微信小程序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("<img ","<img style='max-width:100%;height:auto;'");
		//String contentAfterTable=contentAfterImg.replaceAll("<table ","<table style='table-layout: fixed; width=100%'");
		Document doc = Jsoup.parse(contentAfterImg);
		 
		Elements tables = doc.getElementsByTag("table");
		for (Element table : tables) {
		  String style = table.attr("style");
		 style=style.replaceAll("width","width2");
		  style+="table-layout: fixed; width=100%";
		  table.attr("style",style);
		}
		Elements tds = doc.getElementsByTag("td");
		for (Element td : tds) {
			 td.attr("width","");
		}
		String html= doc.body().html();
		return html;
	}
}

 

 

非自适应的表格

 

自适应的表格

 

参考文章

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