수다닷컴

위와 같은 테이블이 있습니다. 보시다시피 회색영역이 th이고 흰색영역이 td이지요.
th가 배경은 회색인데 자세히보시면 흰색 border가 둘레에 있습니다. 그리고 한 tr영역 사이마다
또 회색 라인으로 구분지어져 있지요.
저걸 구현하려니 처음엔 쉽게 생각했는데 녹록치 않더란 말입니다.
한 셀의 가로세로가 일정하지 않고 가변이거든요. 내용에 따라 크기가 바뀝니다.

처음엔 th,td 모두 border-top 으로 회색 라인을 주고, th 안에 div를 생성후 div에 흰색 border와 회색 배경색을 주었더랬죠.
그런데 세로로 늘어날 경우가 문제가 되었습니다. 세로로 늘어날대마다 일일이 div에 height값을 지정해줄수도 없고;

다른방법은 th에 흰색 border와 회색 배경색을 주고 한줄 사이사이 회색 구분선은 따로 trtd/td/tr -- 이렇게
라인만을 위한 한줄을 만들까 생각했었습니다.

table
tr
th제목/th
td내용/td
/tr
trtd colspan=2/td/tr -- 라인을 나타내기 위한 태그
tr
th제목/th
td내용/td
/tr
/table

근데 이방법은 너무 비효율적입니다. 내용과는 상관도 없는 태그가 너무많이 들어가니까요.

효과적으로 코딩할수 있는 방법이 없는지 의견을 구해봅니당.
제가 너무 어렵게 생각하고 있는거 같기도 해요 ^^;;;;

================================================================================================

질문내용을 살짝 덧붙이자면..
th안에 div태그 혹은 span 태그를 블럭화(-- 의미는이쪽이 더 맞겠지요)시키는 방법을 썼는데 가변적인 가로세로 길이가
문제였습니다. 그래서 th안 div혹은 블럭화시킨 span태그의 height 값을 상위 th의 height값에 맞추는 스크립트를 생각해 보았는데 저 테이블이 페이지내에서 빈번하게 쓰이는 테이블이라 테이블별로 아이디를 부여하기가 쉽지 않은것 같습니다.
그렇다고 본문 영역 안의 모든 테이블 th --이렇게 선택하려니 다른 형식의 테이블까지 영향을 미치구요.
최후의 방법으로 스크립트 라이브러리 등을 써서class 선택으로 가려니 저 테이블 하나에만 적용시킬려고 라이브러리까지 쓴다는것도 걸리고;;

css나 기타 먼가 간단한 방법이 있을것 같은데 잘 모르겠네요..
훨씬 간단한 방법이 혹시 있는지 다시한번 조언을 구합니당..(__)

신청하기