2010년 1월 26일 화요일

테이블그리드 CSS로 효과내기

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<style>
.container {
 width: 100%;
 height: 300px;
 overflow: auto;
}

.HeaderFreezing {
 background-color: #e7e7e7;
 position:relative ;
 top: expression(this.offsetParent.scrollTop);
 z-index: 10;
}

.FooterFreezing {
 background-color: #e7e7e7;
 position: relative;
 bottom: expression((this.offsetParent.offsetWidth != this.offsetParent.clientWidth) ? (this.offsetParent.scrollHeight - (this.offsetParent.scrollTop + this.offsetParent.offsetHeight)) : 0);
 z-index: 20;
}

.td_class {
 background-color: #f9f9f9;
 text-align: center;
 padding: 5px;
}
</style>
 </HEAD>

<BODY>
<div class="container">
<table width=100% border=0 cellpadding=0 cellspacing=1 bgcolor="#E7E7E7">
 <tr class="HeaderFreezing">
  <td class="td_class">고정상단</td>
  <td class="td_class">고정상단</td>
  <td class="td_class">고정상단</td>
  <td class="td_class">고정상단</td>
  <td class="td_class">고정상단</td>
  <td class="td_class">고정상단</td>
 </tr>
 <? for($q=0;$q<100;$q++) { ?>
 <tr bgcolor="#ffffff">
  <td align=center><?=$q?></td>
  <td>내용</td>
  <td>내용</td>
  <td>내용</td>
  <td>내용</td>
  <td>내용</td>
 </tr>
 <? } ?>
 <tr class="FooterFreezing">
  <td class="td_class">하단고정</td>
  <td class="td_class">하단고정</td>
  <td class="td_class">하단고정</td>
  <td class="td_class">하단고정</td>
  <td class="td_class">하단고정</td>
  <td class="td_class">하단고정</td>
 </tr>
</table>
</div>
</BODY>
</HTML>