inxight: 테이블

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>

2009년 7월 29일 수요일

테이블 크기 고정하기[table-layout:fixed]

1. style="table-layout:fixed"

-> 테이블의 크기를 고정해 줍니다. 가로세로 모두 고정이 됩니다

2. style="word-break:break-all;"

-> 1.의 방법으로 고정된 테이블에 긴 글을 넣을경우 가로가 고정되어 있으므로 글자가 잘려 보이는 경우가 발생.이것을 방지하고 글의 자동 줄바꿈 효과를 줍니다

3. height="auto"

-> 1.의 방법으로 고정된 테이블의 세로때문에 글이 고정된 세로길이까지만 보입니다. 이것을 방지하기위해 세로의 길이를 오토로 조정해줍니다.