들어가기 전에

테이블은 브라우저마다 렌더링 하는 방식이 모두 다르기 때문에, 크로스브라우징이 어려운 태그 중 하나입니다.

table, tr, td 각 요소에 position: relative;를 각각 적용할 경우, 셀 안의 position: absolute; 인 요소가 예상대로 위치하는지 확인해보도록 하겠습니다.

학습하기

HTML 실습

table 태그 안에 tr, td를 하나씩 추가하여 셀이 하나인 테이블을 만들고, .wrap DIV로 전체 테이블을 감싸주었습니다. td 안에 .absolute_section이라는 빈 DIV가 바로 position: absolute;로 띄워질 요소이고, td / tr / table / .wrap DIV 에 각각 position: relative;를 적용하였습니다.

<div class="wrap">
  <table class="td_relative">
    <caption>td에 relative</caption>
    <tr>
      <td class="relative_section">
        <div class="absolute_section"></div>
      </td>
    </tr>
  </table>
</div>

<div class="wrap">
  <table class="tr_relative">
    <caption>tr에 relative</caption>
    <tr class="relative_section">
      <td>
        <div class="absolute_section"></div>
      </td>
    </tr>
  </table>
</div>

<div class="wrap">
  <table class="table_relative relative_section">
  <caption>table에 relative</caption>
    <tr>
      <td>
        <div class="absolute_section"></div>
      </td>
    </tr>
  </table>
</div>

<div class="wrap div_relative">
  <table>
  <caption>div에 relative</caption>
    <tr>
      <td>
        <div class="relative_section">
          <div class="absolute_section"></div>
        </div>
      </td>
    </tr>
  </table>

CSS 실습

 .position_section과 .relative_section에 position 값을 각각 absolute와 relative로 적용하였고, relative가 적용된 요소에 따라 컨텐츠를 구분하기 위해 컬러값을 다르게 입력하였습니다.

table {
  border: 1px solid #000;
  table-layout: fixed;
  width: 100%;
  height: 150px;
  border-collapse: collapse;
}
.td_relative {
  border-color: red;
}
.tr_relative {
  border-color: blue;
}
.table_relative {
  border-color: green;
}

.wrap {
  margin: 50px;
}
.relative_section {
  position: relative;
}
.absolute_section {
  position: absolute;
  width: 30px;
  height: 30px;
  left: 0;
  top: 0;
  background-color: #000;
}
.td_relative .absolute_section {
  background-color: red;
}
.tr_relative .absolute_section {
  background-color: blue;
}
.table_relative .absolute_section {
  background-color: green;
}
.div_relative .relative_section {
  width: 100%;
  height: 100%;
}

실습 결과

브라우저마다 position: relative; 가 적용되는 방식이 다르다는 것을 확인할 수 있습니다.

• td에 적용 시, 가장 정상적으로 노출되고 있지만, 요소의 복잡도에 따라 예상치 못한 버그가 발생 할  수 있습니다.
• td 안에 div를 추가하여 적용 시, 일부 브라우저에서 박스가 중앙에 노출되고 있지만, 높이 값과 콘텐츠가 있다면 정상 노출되며 가장 안전한 방법입니다.

요약 정리

테이블은 각 요소를 배치하는 틀로 보고, 셀 안에 div를 추가하여 position 요소나 꾸미는 요소는 내부 div에 직접 선언하는 게 좋습니다.

참고자료