【CSS】固定左邊欄，右邊可捲動
基於工作上關係，需將固定某些欄資訊，並可捲動觀看右邊欄位內的資料。此做法有很多種方式，看過大部分做法都使用Jquery元件，好處是簡單易上手。若不使用任何元件是否可以達到？答案是可以的。
觀念作法：左邊一個Table，右邊一個Table，如要變動右邊，需要將Div包覆右邊Table（DIV用意產生捲軸之用途，可詳My Blog:區塊內捲軸呈現），最後被一個大Table包覆。
示意圖：
部分HTML（參考）︰
<!--Big Table Start-->
<table width="400" border='0' cellpadding='1' cellspacing='0' bordercolor='#000000' align='center' style='table-layout:fixed'>
<tr>
<td width="80">
<!--Left Table Start-->
<table width="80" border='1' cellpadding='1' cellspacing='0' bordercolor='#000000' class='style3'>
<tr align='center' valign='middle' height='25'>
<td width="80"><div align="center">姓名月份</div></td>
</tr>
… 省略 …
</table>
<!--Left Table End-->
</td>
<td width="320">
<!--Right Table Start-->
<div id='Contain' style='overflow-x:scroll; overflow-y:auto; width:320px; margin-top:15px; margin-left:0px;'>
<table width="600" border='1' cellpadding='1' cellspacing='0' bordercolor='#000000' align='center' class='style3' style='table-layout:fixed'>
<tr align='center' valign='middle' height='25' bgcolor='#87B8EB'>
<td width="50">一</td>
<td width="50">二</td>
<td width="50">三</td>
<td width="50">四</td>
<td width="50">五</td>
<td width="50">六</td>
<td width="50">七</td>
<td width="50">八</td>
<td width="50">九</td>
<td width="50">十</td>
<td width="50">十一</td>
<td width="50">十二</td>
</tr>
… 省略 …
</table>
</div>
<!--Right Table End-->
</td>
</tr>
</table>
<!--Big Table End-->
CSS（參考）︰
<style type="text/css">
/*捲軸美化相關設定 */
DIV{
scrollbar-DarkShadow-Color:#9FB7D7;
scrollbar-Track-Color:#F7F7F7;
scrollbar-Face-Color:#C7CFFF;
scrollbar-Shadow-Color:#FFFFFF;
scrollbar-Highlight-Color:#FFFFFF;
scrollbar-3dLight-Color:#C7CFF7;
scrollbar-Arrow-Color:#4F5F87;
}
.style3 {font-family: Arial, Helvetica, sans-serif; font-size: 12px; }
*{padding:0;margin:0;}
.style5 {color: #000000; }
</style>
執行畫面︰
留言
張貼留言