表格不适合屏幕宽度

时间:2017-01-22 11:49:24

标签: html ios css uiwebview

截图:

Screenshot of table

我尝试使用UIWebView为iOS项目显示HTML,但从上图中可以看出,TD不适合屏幕的宽度。我使用浏览器尝试了HTML源代码并且运行良好,但在移动设备中却没有。

我需要什么才能使表格完全适合屏幕?

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style>
            body {
                font: 9pt tahoma, sans-serif;
                direction:rtl;
            }
            *
            {
                margin: 0px;
                padding: 0px;
            }
            html, body
            {
                height: 100%;
            }
            #print-header {
                width:95%;
                margin:10px auto 10px auto;
                /*
                 background-image:url('../../icon/logo.png');
                 background-repeat:no-repeat;
                 background-position:left top;
                 */
            }
            #print-header table {
                border-collapse: collapse;
                border:0;
                margin:10px auto 10px auto;
                text-align: center;
                width:100%;
                /*border:1px solid black;*/
            }
            #print-header .key {
                text-align: left;
            }
            #print-header .value {
                text-align: right;
                /*font-weight:bold;*/
            }
            #print-header th {
                border:0;
                text-align: right;
                width:50%;
                /*background:red;*/
            }
            #print-header td {
                border:0;
            }
            #print-body table{
                border-collapse: collapse;
                border:1px solid black;
                margin:20px auto 20px auto;
                text-align: center;
                width:200%;
                white-space: nowrap;

            }
            #print-body  thead  {
                font-weight:bold;
            }
            #print-body th{
                border:1px solid black;
                padding:2px;
            }
            #print-body td{
                border:1px solid black;
                padding:2px;
            }
            #print-footer {
                text-align: center;
                font-size:13px
            }
            #print-body #print-caption {
                text-align: center;
                font-weight: bold;
                font-size: small;
                padding: 40px 0 30px 0;
            }
        </style>
    </head>
    <body>
        <div >
            <table>
                <tr>
                    <th rowspan="2" align=right><img border="0" src=".../img.png"></th>
                </tr>
            </table>
        </div>
        <div id="print-body">
            <hr size="4px" style="background-color:black">
            <table cellspacing="0" cellpadding="0">
                <tr>
                    <td width="100%">ISSUE DATE</td>
                </tr>
            </table>
        </div>
        <hr size="4px" style="background-color:black">
        <div id="print-footer">
            <p>sassas<br>asassasa</p>
        </div>
    </body>
</html>

1 个答案:

答案 0 :(得分:0)

尝试表witdh:100%和position:fixed