調整表的大小以適應屏幕分辨率

我有html頁面，如下調整表的大小以適應屏幕分辨率

<style> 
    h2.message{text-align: center; color: #FDFDFD; font-size: 1.1em; background: #708fc3; } 
    #invoiceList{ float: left; width: 15% } 
    #invoiceFrame{float: right; width: 83.5%; margin-bottom: 0em !important; } 
     td error { color: red; font-size: 100%;} 
     tr.errortrue { color: #c33; font-size: 100%; font-weight: bold;} 
     table#lines th { background-color : grey; color: white; width:100%} 
     table {margin-bottom: 2em; border-bottom: 2px solid #ebebeb; empty-cells: show; border-collapse: collapse; } 
     table#lines td { text-align: center; width:100%} 

    iframe { float: left; width: 100%; height =300px; 
     } 
     </style> 
    </head> 
    <body id='foo'> 
<div class="ui-widget"> 
<center><h1> Invoice Error Details For ePacket P00000079247</h1></center> 
    <div class="panel ui-widget-content" id="invoiceList"> 
<h2 class="ui-widget-header ui-corner-top" style="cursor: pointer; font-size: 1.1em; "><span>Invoices</span></h2> 
<table cellspacing='0' id='header' class="ui-widget"> 
        <tr> 
         <th>Invoice Number</th> 
         <th>Invoice Total</th> 
        </tr> 

      <tr class = 'errortrue'> 
         <td>10InvPatentMatter</td> 
       <td>1507.93</td> 
      </tr> 

      <tr class = 'errortrue'> 
         <td>10InvAppMatter</td> 
       <td>1444.14</td> 
      </tr> 

      <tr class = 'errortrue'> 
         <td>10InvPatentOfProdMat</td> 
       <td>1775.45</td> 
      </tr> 

      <tr class = 'errortrue'> 
         <td>10InvTrademarkMat</td> 
       <td>1987.01</td> 
      </tr> 

      <tr class = 'errortrue'> 
         <td>10InvAcqMatter</td> 
       <td>801.56</td> 
      </tr> 

      <tr class = 'errortrue'> 
         <td>10InvHenleyMatter</td> 
       <td>567.89</td> 
      </tr> 

      <tr class = 'errortrue'> 
         <td>10InvCooperMatter</td> 
       <td>760.53</td> 
      </tr> 

      <tr class = 'errortrue'> 
         <td>10InvACMEMatter</td> 
       <td>439.01</td> 
      </tr> 

      <tr class = 'errortrue'> 
         <td>10InvFoxMatter</td> 
       <td>337.67</td> 
      </tr> 

      <tr class = 'errortrue'> 
         <td>10InvMvAntiInvoice</td> 
       <td>909.84</td> 
      </tr> 

     </table> 
</div> 
<!-- <div class='panel ui-widget-content' id="invoiceDetails"> 
<h2 class="ui-widget-header ui-corner-top" style="cursor: pointer; "><span>Select the Invoice Number on the left to view the error details</span></h2>--> 
<h2 class='message'><span>Select the Invoice Number on the left to view the error details</span></h2> 
<div class='panel ui-widget-content' id="invoiceFrame"><iframe src="" id="mainFrame" name="mainFrame" scrolling="no" class='panel ui-widget-content' onload='javascript:resizeIframe(this);'></iframe> 
    </div> 

</div>

當您選擇從header表的詳細信息被顯示在iframe任何發票號碼

下面是IFRAME源發票的一個

</script> 
     <style> 
     #invoice {padding: 0;} 
     tbody td{ border-top: 2px solid #efefef; border-bottom: 0px !important ;} 
     td.error { text-align: left; color: #c33; font-size: 100%; background-image: none !important; padding-left : 0; border-bottom: 2px solid #0891F4} 
     tr.errortrue { color: #c33; font-size: 100%; font-weight: bold;} 

     table {empty-cells: show; border-collapse: collapse; } 
     table#lines td { text-align: left;} 

     </style> 
    </head> 
<body id='invoice'> 
<div id="invoiceErrors"> 
    <div class='panel ui-widget-content' id="invoiceHeaders"> 
<h2 class="ui-widget-header ui-corner-top" style="cursor: pointer; font-family: Tahoma,Arial,sans-serif; font-size: 1.2em;"><span>Header Details</span></h2> 
    <table class="ui-widget" id="headers"> 
        <tr> 
         <th>Invoice Number</th> 
         <th>Matter Number</th> 
         <th>Invoice Total</th> 
         <th>Invoice Tax Total</th> 
         <th>Invoice Net Total</th> 
        </tr> 

        <tr class='errorfalse'> 
         <td>10InvPatentOfProdMat</td> 
         <td>6998</td> 
         <td>1775.45</td> 
         <td>1775.45</td> 
         <td>1775.45</td> 
        </tr> 
<tr ><td class = 'error' style="padding-bottom: 0%;"> 

</td></tr> 
    </table> 
</div> 
<div class='panel ui-widget-content' id="invoiceLines"> 
<h2 class="ui-widget-header ui-corner-top" style="cursor: pointer; font-family: Tahoma,Arial,sans-serif; font-size: 1.2em;"><span>Invoice Line Items</span></h2> 

<table class="ui-widget" id="lines"> 
<tr> 
<th>Line Item Number</th> 
<th>Line Item Date</th> 
<th>Unit Cost</th> 
<th>Number of Units</th> 
<th>Line Item Total</th> 
<th>Task Code</th> 
<th>Expense Code</th> 
<th>Timekeeper ID</th> 
<th>Line Item Description</th> 
</tr> 

<tr class='errortrue'> 
<td>1</td> 
<td>20100510</td> 
<td>1775.45</td> 
<td>1</td> 
<td>1775.45</td> 
<td></td> 
<td>E109</td> 
<td></td> 
<td>E LI Patent of Prod Matter Invoice</td> 
</tr> 
<tr> 
<td colspan="9" class='error' style="padding-bottom: 12%;"> 

     Line : 1 NULL Value is not in the defined list for tax_type<br/> 

     Line : 1 NULL Value is not in the defined list for inv_account_type<br/> 

     Line : 1 inv_currency is a required field<br/> 

     Line : 1 matter_name is a required field<br/> 

</td> 
</tr> 

</table> 

</div> 
</div>

當頁面是全屏幕看起來不錯，如下

個

發票明細具有良好分辨率http://i.imgur.com/htpA9lx.jpg

但如果該頁面變得更小它就會變得混亂，請檢查下面

div id = "invoiceList"http://i.imgur.com/wzt2v84.png

table id = "header"http://i.imgur.com/WIZwYjW.jpg

table id = "header" tbodyhttp://i.imgur.com/Tejl0dY.jpg

圖像

div id = invoiceLineshttp://i.imgur.com/EpEh2QW.jpg

table id = "lines"http://i.imgur.com/Soh08iY.jpg

table id = "lines" trhttp://i.imgur.com/KeLoiwU.jpg

我嘗試使用width:100%的表作爲其他職位建議，但它並沒有真正爲我工作。