html 報告頁面樣式

本文轉載自查看原文 2019-04-18 16:22 752 html

修改了下HTML頁面樣式

頁面代碼

        <!DOCTYPE html>
        <html lang="en">
        <head>
            <meta charset="UTF-8">
            <title>自動化測試報告</title>
            <link href="http://libs.baidu.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet">
            <h2 style="font-family: Microsoft YaHei">自動化測試報告</h2>
            <p class='attribute'><strong>測試結果 : </strong> 共 10，通過 9，失敗 1</p>
            <style type="text/css" media="screen">
        body  { font-family: Microsoft YaHei,Tahoma,arial,helvetica,sans-serif;padding: 20px;}
        td {text-align:center}
        th {text-align:center}
        </style>
        </head>
        <body>
            <table id='result_table' class="table table-condensed table-bordered table-hover" >
                <colgroup>
                    <col align='left' />
                    <col align='right' />
                    <col align='right' />
                    <col align='right' />
                </colgroup>
                <tr id='header_row' class="text-center success" style="font-weight: bold;font-size: 14px;">
                    <th width="25%">客戶端及版本</th>
                    <th width="25%">通過率%</th>
                    <th width="25%">開始時間</th>
                    <th width="25%">結束時間</th>
                </tr>
                
        <tr class='failClass warning'>
            <td > 3.8.8</td>
            <td>99</td>
            <td>2019-04-17 20:21:27</td>
            <td>2019-04-17 20:21:27</td>
        </tr>
            </table>
        <!-- 執行模塊 -->
        <p class='attribute'><strong>測試詳情 : </strong> 執行結果</p>    
            <table id='result_table' class="table table-condensed table-bordered table-hover">
                <colgroup>
                    <col align='left' />
                    <col align='right' />
                    <col align='right' />
                    <col align='right' />
                </colgroup>
                <tr id='header_row' class="text-center success" style="font-weight: bold;font-size: 14px;">
                    <th colspan="2">業務模塊</th>
                    <th>用例總數</th>
                    <th>通過數</th>
                    <th>狀態</th>
                </tr>
                 <tr id='header_row' class="text-center success" style="font-weight: bold;font-size: 14px;">
                    <th width="20%"></th>
                    <th width="20%">模塊1</th>
                    <th width="20%">10</th>
                    <th width="20%">8</th>
                    <th width="20%"><font color="green">PASS</font></th>
                </tr>                           
                
        <tr class='failClass warning'>
            <td></td>
            <td>3.8.8</td>
            <td>100</td>
            <td>90</td>
            <td><font color="green">PASS</font></td>
        </tr>
                 <tr id='header_row' class="text-center success" style="font-weight: bold;font-size: 14px;">
                    <th width="20%"></th>
                    <th width="20%">模塊2</th>
                    <th width="20%">10</th>
                    <th width="20%">8</th>
                    <th width="20%"><font color="#FF0000">Fail</font></th>
                </tr>                           
                
        <tr class='failClass warning'>
            <td></td>
            <td>3.8.8</td>
            <td>100</td>
            <td>90</td>
            <td><font color="#FF0000">Fail</font></td>
        </tr>        
        
            </table>        
        


        
            
        </body>
        </html>

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 html頁面公共樣式 html頁面button樣式 python 生成HTmL報告頁面 jenkins html報告不顯示樣式 html頁面展示Json樣式 HTML頁面仿WORD樣式 jQuery改變html頁面樣式 HTML5基本頁面樣式解決Jenkins中HTML報告樣式無法正常顯示問題 HTML頁面打印分頁標簽樣式