表格不适合屏幕宽度

Posted

技术标签:

【中文标题】表格不适合屏幕宽度【英文标题】：Table not fit to size screen width 【发布时间】：2017-01-22 11:49:24 【问题描述】：

截图：

我尝试用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 >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>

【问题讨论】：

不熟悉UIWebView，我这里也没有iOS机器，但是我看你没有&lt;meta viewport命令。 @MrLister 试过但还是不行。 【参考方案1】：

尝试表格 witdh:100% 和 position:fixed

【讨论】：

以上是关于表格不适合屏幕宽度的主要内容，如果未能解决你的问题，请参考以下文章

CSS 表格列宽不适合某些屏幕尺寸

VueJS - 在 ag-grid-vue 中将列/表格调整到屏幕的任何宽度

Swift 3，iOS 10 - 以编程方式声明 UIStackView 不适合屏幕宽度

创建适合任何屏幕分辨率的母版页

使UIImageView适合屏幕宽度但保持纵横比[swift]

视口适合屏幕宽度和大图像