调整表格大小以适合屏幕分辨率 [英] Adjust table size to fit in Screen Resolution
本文介绍了调整表格大小以适合屏幕分辨率的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我的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" tbody http://i.imgur.com/Tejl0dY.jpg
div id = invoiceLines http://i.imgur.com/EpEh2QW.jpg
table id = "lines" http://i.imgur.com/Soh08iY.jpg
table id = "lines" tr http://i.imgur.com/KeLoiwU.jpg
我尝试按照其他帖子中的建议将width:100%用于表格，但对我而言确实没有用.
有人可以帮我吗?
解决方案
以我的经验，通过垂直堆叠此类内容，可以使它们更好地响应. Bootstrap中的网格和列系统之类的功能可以很好地解决这一问题.
http://getbootstrap.com/css/#grid
使用列可以使元素很好地堆叠在一起，而不是将它们压缩成小块.
I have html page as below
<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>
When you select any invoice number from the header table its details gets displayed in an iframe
Here is iframe source for one of the invoices
</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>
When the page is full screen it looks good as below
Invoice Details With Good Resolution http://i.imgur.com/htpA9lx.jpg
But if the page is made smaller it gets messy, please check the images below
div id = "invoiceList"http://i.imgur.com/wzt2v84.png
table id = "header"http://i.imgur.com/WIZwYjW.jpg
table id = "header" tbody http://i.imgur.com/Tejl0dY.jpg
div id = invoiceLines http://i.imgur.com/EpEh2QW.jpg
table id = "lines" http://i.imgur.com/Soh08iY.jpg
table id = "lines" tr http://i.imgur.com/KeLoiwU.jpg
I tried using width:100% for table as suggested in other posts but it didnt really work for me.
Can someone please help me with this?
解决方案
In my experience, things like this are better made responsive by stacking them vertically. Something like the grid and column system in Bootstrap helps nicely with this.
http://getbootstrap.com/css/#grid
Using columns lets the elements stack nicely on top of each other instead of squishing them into little bits.
这篇关于调整表格大小以适合屏幕分辨率的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
