[Js/jquery]table Row to column

Summary

When you use EWS to call Exhange's Inbox and display the message details on the H5 page, the contents of each message returned are HTMLBody and there is no textbody. Each message is not regular, it is not appropriate to use regular expressions to match the content, but also to keep the original message format. This is really difficult to unify. Currently, the HTML of the original message is displayed in the IFRAME using the IFRAME tag. But again, if there is a big table in the mail, big picture, how to keep the message content adaptive?

Thinking

A common practice is to add meta tags to the head

<meta name="viewport" content="width=device-width,user-scalable=0  " />

But it's not going to solve all the problems.

1. Picture

Picture Adaptive

img{Max-height:720px;  Max-width:640px;  Width:expression (this640This640true);  }

The above code, to control the width of the picture, but it is not perfect. Because the phone screen exactly how wide, is not sure, is now to make the IFRAME adaptive, and then the width of the picture width is set to 100%.

2.table

Table problem, the most annoying, if it is a single-column table, but also to adapt, if encountered table nested table, nested IMG, or can not adapt. Today, in the thought that the multi-column can not adapt, then I would like to turn it into a column to solve the problem?

Also is an attempt, do not know whether can solve.

@{Viewbag.title="Table";} @model IEnumerable<wolfy.logmonitor.models.log><table style="width:100%;"Id="tb1"Border="1"> <tr> <td> types </td> <td> content </td> <td> time </td>        @*<td> Nesting table</td>*@    </tr>@foreach (varIteminchModel) {        <tr> <td> @item. Type</td> <td> @item. Content</td> <td> @item. Dt</td>            @*<td> <table style="width:100%;"Id="TB2"> <tr> <td> Types </td> <t d> content </td> <td> time </td> </tr>@foreach (varItem2inchModel) {                            <tr> <td> @item2. Type</td> <td> @item2. Content</td> <td> @item2. Dt</td> </tr>                        }                    </table> </td>*@        </tr>    }</table><script>$.fn.convertcolumns2rows=function (obj) {console.log (obj); varSelf =NewObject (); if(!obj) {            varSelf = This; } Else{ Self=obj; }        varTDS = $ (self). FIND ("TR"). Find ("TD"); if(Tds.length >2) {            //clear the contents of the original table$ (self). HTML ("');                $.each (TDS, function (index, Element) {$.fn.convertcolumns2rows ($ (element)); $('<tr><td>'+ $ (Element). HTML () +'</td></tr>'). AppendTo ($ (self));        });    }    }; varTables = $ ("Table"); Console.log (tables.length) for(vari =0; i < tables.length; i++) {$ (tables[i]). Convertcolumns2rows (); }    //$ ("#tb2"). Convertcolumns2rows ();</script>

Above, an extension method is added for the table, which enables the conversion of a multicolumn table to a column of multiple rows.

Original table

Converted Table

and table nesting tables, in extension methods, recursion is added.

After the converted

Summarize

There is no perfect solution for the display of email content in exhange, and how to make it adaptive. There are many ways to try. The problem with this row is also one of the attempts. The HTML returned by Exchange is not self-adapting and can only be adapted to the returned content. If you also encounter such a problem, how to solve? Expect a better solution.

[Js/jquery]table Row to column