Jquery 调整表格大小以适应屏幕分辨率_Jquery_Html_Css

Jquery 调整表格大小以适应屏幕分辨率

jquery html css

Jquery 调整表格大小以适应屏幕分辨率,jquery,html,css,Jquery,Html,Css,我有如下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; }

我有如下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>

当页面全屏显示时，如下所示

具有良好分辨率的发票详细信息

但是如果页面变小，会变得凌乱，请查看下面的图片

div id=“发票列表”

table id=“header”

table id=“header”t正文

div id=invoiceLines

table id=“lines”

table id=“lines”tr

我试着像在其他帖子中建议的那样，对表格使用

width:100%

，但它对我来说并不奏效

有人能帮我吗？

根据我的经验，像这样的东西最好是垂直堆放。类似于Bootstrap中的网格和列系统的东西很好地帮助了这一点

使用列可以让元素很好地堆叠在彼此的顶部，而不是将它们挤压成小块。

是

表格#标题

位置绝对，还是具有

浮动

属性？您也可以尝试

#invoiceList{float:left；width:15%；overflow-x:auto}

表格#标题

位置不是

绝对

并且它没有

float

属性

  </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>