• riix
  • Member
  • 접속 중 아님
  • 위치: 인천↔강남 (토나와)
  • 가입: 2006-12-13
  • 글: 40

주제: DOCTYPE 적용 후 IE에서의 다단 100% Height Table Layout 풀림 문제

CDK 유저 여러분 새해 복 많이 받으세요~

제목이 이해하기 쉽게 쓰여졌는지 모르겠네요.
다름이 아니라 100%의 높이 값을 가진 테이블 레이아웃을 짜려고 하는데요. (팝업 창 등에 쓰여질)
Doctype 을 HTML 4.01 Transitional 에 맞추어 하려는데
IE 에서는 테이블 row의 높이값이 풀어져 버리네요 sad
물론 Doctype 을 제외하면 적용이 되지만요.
해결법을 찾으려 하는데 쉽지가 않아요.

소스 봐주시고 혹시 좋은 방법이 있다면 도움을 좀 부탁드리겠습니다.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="ko">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=euc-kr" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<title>TITLE</title>
<style type="text/css">
/* <![CDATA[ */

body { margin: 0px; padding: 0px; background: #eee; overflow: hidden; }
html, body { height: 100%; border: none; }

table { width: 100%; height: 100%; }
table thead tr { height: 30px; }
table tfoot tr { height: 30px; }
/* ]]> */
</style>
</head>

<body scroll="no">

<table border="1">
<thead>
<tr>
    <th>
        header
    </th>
</tr>
</thead>
<tfoot>
<tr>
    <td>
        footer
    </td>
</tr>
<tbody>
<tr>
    <td>
        body
    </td>
</tr>
</tbody>
</table>

</body>
</html>

적용 후 화면 결과

FF
http://img380.imageshack.us/img380/2042/blogriixnet002we2.gif

IE
http://img243.imageshack.us/img243/351/blogriixnet001kr6.gif

최종 편집 : riix (2009-01-06 01:26 PM)

라면은 삼양!

riix's 웹사이트

  • 나니
  • Member
  • 접속 중 아님
  • 위치: sinsa, gangnam, seoul
  • 가입: 2006-07-12
  • 글: 1,093

답변: DOCTYPE 적용 후 IE에서의 다단 100% Height Table Layout 풀림 문제

마크업이 좀 이상한데요....
왜

<thead>...</thead>
<tbody>...</tbody>
<tfoot>...</tfoot>

이 아니라

<thead>...</thead>
<tfoot><tbody>...</tbody>

인거죠?

Nom de Plume Mai Jeong

나니's 웹사이트

  • riix
  • Member
  • 접속 중 아님
  • 위치: 인천↔강남 (토나와)
  • 가입: 2006-12-13
  • 글: 40

답변: DOCTYPE 적용 후 IE에서의 다단 100% Height Table Layout 풀림 문제

네 고맙습니다. </tfoot> 한 줄을 누락했네요.. 순서는 thead, tfoot, tbody 순이라고 알고 있습니다.

라면은 삼양!

riix's 웹사이트

  • peecky
  • Member
  • 접속 중 아님
  • 위치: 포항
  • 가입: 2007-05-12
  • 글: 97

답변: DOCTYPE 적용 후 IE에서의 다단 100% Height Table Layout 풀림 문제

IE에서만 안 되는거니 IE 전용 속성으로 해결할 수 있겠네요.

tbody    { height:expression(document.body.clientHeight-60); }

빼는 값(-60)은 표의 border 두께 고려해서 적당히 조절하면 됩니다.

나니 wrote:

마크업이 좀 이상한데요....
왜
<thead>...</thead>
<tbody>...</tbody>
<tfoot>...</tfoot>
이 아니라
<thead>...</thead>
<tfoot><tbody>...</tbody>
인거죠?

CSS 렌더링이 제한된 환경에서 table을 렌더링 할 때 thead와 tfoot를 미리 출력해서 화면 상하에 고정하고, 표 본문 부분은 내용이 길어지면 스크롤 되는 형식으로 보여주기 위해 tbody보다 tfoot가 먼저 온다고 알고 있습니다. (실제 그렇게 보여주는 브라우저를 본 적은 없습니다만...)

peecky's 웹사이트

  • 위치: Seoul, ilsan
  • 가입: 2008-07-15
  • 글: 82

답변: DOCTYPE 적용 후 IE에서의 다단 100% Height Table Layout 풀림 문제

peecky wrote:

IE에서만 안 되는거니 IE 전용 속성으로 해결할 수 있겠네요.

tbody    { height:expression(document.body.clientHeight-60); }

빼는 값(-60)은 표의 border 두께 고려해서 적당히 조절하면 됩니다.

나니 wrote:

마크업이 좀 이상한데요....
왜
<thead>...</thead>
<tbody>...</tbody>
<tfoot>...</tfoot>
이 아니라
<thead>...</thead>
<tfoot><tbody>...</tbody>
인거죠?

CSS 렌더링이 제한된 환경에서 table을 렌더링 할 때 thead와 tfoot를 미리 출력해서 화면 상하에 고정하고, 표 본문 부분은 내용이 길어지면 스크롤 되는 형식으로 보여주기 위해 tbody보다 tfoot가 먼저 온다고 알고 있습니다. (실제 그렇게 보여주는 브라우저를 본 적은 없습니다만...)

height:expression(document.body.clientHeight-60) 이런식으로 해결하는방법이 있군요.
저도 이와 비슷한문제로 고민이다가 결국 스크립으로 만들어서 해결했는데.. experssion 이라는게 있다니.. 감사합니다.
혹시 이런 IE에서 쓸수있는거 정보 많이 있는곳 아시나요??

길앞잡이

Cicindela's 웹사이트

  • 나니
  • Member
  • 접속 중 아님
  • 위치: sinsa, gangnam, seoul
  • 가입: 2006-07-12
  • 글: 1,093

답변: DOCTYPE 적용 후 IE에서의 다단 100% Height Table Layout 풀림 문제

딴소리지만, 사실 스크롤이라는게.... tbody에 원래 먹어야 정상 같은데 (height 고정, overflow: scroll-y 줬을 때) ie에서는 안 먹더군요 (..)
head - foot - body 순이라는 건 첨 알았네요...

Nom de Plume Mai Jeong

나니's 웹사이트

  • peecky
  • Member
  • 접속 중 아님
  • 위치: 포항
  • 가입: 2007-05-12
  • 글: 97

답변: DOCTYPE 적용 후 IE에서의 다단 100% Height Table Layout 풀림 문제

Cicindela wrote:

혹시 이런 IE에서 쓸수있는거 정보 많이 있는곳 아시나요??

제가 아는건 msdn 정도 -ㅅ-
http://msdn.microsoft.com/en-us/library … S.85).aspx

peecky's 웹사이트

  • 가입: 2006-10-25
  • 글: 83

답변: DOCTYPE 적용 후 IE에서의 다단 100% Height Table Layout 풀림 문제

peecky wrote:

IE에서만 안 되는거니 IE 전용 속성으로 해결할 수 있겠네요.

tbody    { height:expression(document.body.clientHeight-60); }
빼는 값(-60)은 표의 border 두께 고려해서 적당히 조절하면 됩니다.

나니 wrote:

마크업이 좀 이상한데요....
왜
<thead>...</thead>
<tbody>...</tbody>
<tfoot>...</tfoot>
이 아니라
<thead>...</thead>
<tfoot><tbody>...</tbody>
인거죠?

CSS 렌더링이 제한된 환경에서 table을 렌더링 할 때 thead와 tfoot를 미리 출력해서 화면 상하에 고정하고, 표 본문 부분은 내용이 길어지면 스크롤 되는 형식으로 보여주기 위해 tbody보다 tfoot가 먼저 온다고 알고 있습니다. (실제 그렇게 보여주는 브라우저를 본 적은 없습니다만...)

expression 속성을 쓰는건 javascript 를 쓰는것과 차이가 없습니다. 오히려 더 않좋을수도 있죠. 중간에 제어되지 않고 계속 반복되니. setInterval을 써서 하는것처럼 시간을 주는것도 아니공..

  • 나니
  • Member
  • 접속 중 아님
  • 위치: sinsa, gangnam, seoul
  • 가입: 2006-07-12
  • 글: 1,093

답변: DOCTYPE 적용 후 IE에서의 다단 100% Height Table Layout 풀림 문제

제 생각에도 expression 쓸바에 차라리 conditional comment 로 묶고 js 컨트롤 하는게 좋아보입니다.

Nom de Plume Mai Jeong

나니's 웹사이트