我有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%
作为其他帖子中建议的表,但它对我来说并没有真正起作用。
有人可以帮帮我吗?
答案 0 :(得分:2)
根据我的经验,通过垂直堆叠它们可以更好地做出响应。像Bootstrap中的网格和列系统这样的东西可以很好地解决这个问题。
http://getbootstrap.com/css/#grid
使用列可以让元素很好地叠加在一起,而不是将它们压成小块。