左右兩個table,各佔頁面的一半,左邊的table“名字”可能會很長,要求名字全部顯示,所以就要折行顯示。但是折行顯示後高度就會變化,要求右邊的table高度和左邊一樣。而且隨着頁面放大縮小table的高度始終一致。
而右邊的table放的是文件名的超鏈接,要求超過五個文件就要顯示滾動條。所以右邊是將table放在了div中,給div固定了高度,加了縱滾動,所以設置兩邊一般高就是讓右邊div的高度隨着左邊table的變化而變化。
<script type="text/javascript">
// 2020/01/08 P-KI-EN-V5-0015 Insert Start
function tableHeightCheck(tableLeft,tableRight){
var tLeft = document.getElementById(tableLeft);
var tRight = document.getElementById(tableRight);
var lHeight = tLeft.offsetHeight;
tRight.style.height = lHeight - 31 + 'px';
}
// 頁面放大縮小時高度調整
window.onresize = function(){
tableHeightCheck("tableLeft","tableRight");
}
</script>
<style>
.LstScroll10 {
height: 113px;
overflow-y: scroll;
margin-left: 0px;
margin-bottom: 10px;
margin-top: 0px;
padding: 0px;
border: 1px solid #FFFFFF;
background-color: #FFFFFF;
}
.TblWidth {
width: 100%;
border: 1px solid #FFFFFF;
padding: 0px;
margin: 10px;
border-collapse: collapse;
border-spacing: 0px;
}
</style>
<body onload="tableHeightCheck('tableLeft','tableRight');">
<table id="tableLeft" class="TblWidth" style="margin-left:0px; width: 100%;">
<tr height="30">
<th style="padding-top:0px;padding-bottom:0px;border-right-width:0px;">表頭</th>
</tr>
<tr>
<td class="CellHead" height="12.5" width="22%" nowrap>1</td>
<td class="CellHead" height="12.5">內容</td>
</tr>
<tr>
<td class="CellHead" height="12.5">2</td>
<td class="CellHead" height="12.5">內容</td>
</tr>
<tr>
<td class="CellHead" height="12.5">名</td>
<td class="CellOdd" style="word-wrap:break-word;word-break:break-all;" height="12.5">很長很長。。。</td>
</tr>
<tr>
<td class="CellHead" height="12.5">3</td>
<td class="CellHead" height="12.5">內容</td>
</tr>
<tr>
<td class="CellHead" height="12.5">4</td>
<td class="CellHead" height="12.5">內容</td>
</tr>
</table>
<div class="LstScroll10" id="tableRight" style="border:0px;border-top-style:none;width:100%;">
<table class="TblWidth" style="margin-left:0px; margin-top:0px; border-top:0px;width:100%;">
<%
for ( int i = 0; i < iMaxIndex ; i++) {
doc = (KDocument)ltDocList.get(i);
strDocName = doc.getDocName().trim();
%>
<tr height="23.3"><td>
<a href="#" onClick="selectWindow( <%= i %>, '1' )" ><%= strDocName %></a>
</td></tr>
}
</table>
</div>
</body>