Resize the table to fit the screen resolution
I have html page as shown 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 the invoice number from the table header
, its data will be displayed in the iframe
Here is the 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 in full screen looks good like 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 to use width:100%
for a table as suggested in other posts, but that didn't work for me.
Can someone please help me with this?
source to share
In my experience, things like this are best responded by stacking them vertically. Something like grid and columns in Bootstrap helps with this well.
http://getbootstrap.com/css/#grid
Using columns allows the elements to stack neatly on top of each other instead of crossing them with little bits.
source to share