HTML에서 TABLE의 height조절 문제
글쓴이: urmajest / 작성시간: 토, 2005/11/19 - 11:31오전
<table width=560> <tr> <td width="50%"> <table width=270 border="0"> ....... </table> </td> <td> <table width=270 border="0"> ..... </table> </td> </table>
이와 같은 형태의 table이 있습니다.
폭이 560인 table을 왼쪽 오른쪽 각각 270씩 나누어서,
그 안에 다른 table이 있는 형태인데요..
문제는 왼쪽 table에는 fixed number of row가 항상 출력이 되고(php로 최근 게시물을 정해진 수만큼 fetch하고 있습니다.)
오른쪽 table에는 최근 게시물의 내용을 출력되게 하였습니다.
그런데 제가 원하는 건 왼쪽 테이블의 height에 의해서
오른쪽 테이블의 "최근 게시물 내용"이 출력되는 행수도 맞추고
싶은데 어떻게 해야하는지 모르겠네요.
현재로서는 php에서 substr을 사용해서 글자수를 제한해놓고
사용중인데 별로 바람직하지 않은 것 같습니다.
참고로 전체 소스는 pkuaa dot net에서 소스보기로 보실 수 있구요.
html documentation 을 찾아봐도 이건 어떻게 하는지 모르겠네요.
웹페이지는 처음 만들어 봐서 대충 ie랑 firefox에서 잘 나오는지
확인하였는데, 제대로 작성한건지도 모르겠고 -_-
도와주세요 ^^
Forums:
세로폭을 고정시킨 다음 overflow: hidden으로 해당 박스를 잘
세로폭을 고정시킨 다음 overflow: hidden으로 해당 박스를 잘라버리는 것이 유일한 해결책입니다. 더 예술적인 결과물을 얻어내는 방법은 없습니다.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html> <head> <style type="text/css"> <!-- h1 { font-family: "arial" serif; font-size: 18pt; text-align: center; } h2 { font-size: 8pt; font-weight: normal; border-style: solid; border-width: 0 0 1px 5px; padding: 1px 10px; color: #555; background: transparent; } #mainbox { width: 560px; height: 300px; margin: 0 auto; padding: 10px; border: 1px solid black; font-size: 10pt;} .smallbox { float: left; width: 250px; margin: 10px; padding: 0; } #announcements h2 { border-color: #8888cc; } #recenttopics h2 { border-color: #88cc88; } #notice h2 { border-color: #dd4; margin-bottom: 0; } #notice .text { height: 200px; overflow: hidden; } #notice .info { font-size: 8pt; text-align: right; margin-top: 3px; margin-bottom: 1em; color: #888; backgroung: transparent; } #notice .info a { text-decoration: none; color: black; background: transparent; } --> </style> </head> <body> <h1>Purdue Korea University Alumni Association</h1> <div id="mainbox"> <div class="smallbox"> <div id="announcements"> <h2>ANNOUNCEMENTS</h2> <ul> <li>Thanksgiving Dinner Gathering</li> <li>PKUAA Homepage's up</li> <li>Welcome to PKUAA.NET</li> </ul> </div> <div id="recenttopics"> <h2>RECENT TOPICS</h2> <ul> <li>THANKSGIVING DINNER GATHERING 참가여부를 알려주세요.</li> <li>I will be in</li> <li>와...멋지다..</li> <li>칠면조....</li> <li>Thanksgiving을 맞이하여..</li> <li>와우~ 멋진걸.</li> <li>추카추카</li> </ul> </div> </div> <div id="notice" class="smallbox"> <h2>Thanksgiving Dinner Gathering</h2> <div class="info">posted by <a href="a.html">이경우</a> on 11/18</div> <div class="text"> 이번 돌아오는 땡스기빙에 동문 저녁모임을 갖고자 합니다. 다들 이번 휴가에 쇼핑 또는 여행 계획이 있으리라 봅니다만, 많은 분들이 참석하셔서 따뜻한 시간을 보냈으면 합니다. 장소와 시간은 아래와 같습니다. 이번 돌아오는 땡스기빙에 동문 저녁모임을 갖고자 합니다. 다들 이번 휴가에 쇼핑 또는 여행 계획이 있으리라 봅니다만, 많은 분들이 참석하셔서 따뜻한 시간을 보냈으면 합니다. 장소와 시간은 아래와 같습니다.이번 돌아오는 땡스기빙에 동문 저녁모임을 갖고자 합니다. 다들 이번 휴가에 쇼핑 또는 여행 계획이 있으리라 봅니다만, 많은 분들이 참석하셔서 따뜻한 시간을 보냈으면 합니다. 장소와 시간은 아래와 같습니다.이번 돌아오는 땡스기빙에 동문 저녁모임을 갖고자 합니다. 다들 이번 휴가에 쇼핑 또는 여행 계획이 있으리라 봅니다만, 많은 분들이 참석하셔서 따뜻한 시간을 보냈으면 합니다. 장소와 시간은 아래와 같습니다.이번 돌아오는 땡스기빙에 동문 저녁모임을 갖고자 합니다. 다들 이번 휴가에 쇼핑 또는 여행 계획이 있으리라 봅니다만, 많은 분들이 참석하셔서 따뜻한 시간을 보냈으면 합니다. 장소와 시간은 아래와 같습니다. 다들 이번 휴가에 쇼핑 또는 여행 계획이 있으리라 봅니다만, 많은 분들이 참석하셔서 따뜻한 시간을 보냈으면 합니다. 장소와 시간은 아래와 같습니다. </div> <div class="info"><a href="a.html">read more</a></div> </div> </div> </body> </html>아 감사합니다~완전히 새로 손 봐 주셨네요.코드가 훨씬 간
아 감사합니다~
완전히 새로 손 봐 주셨네요.
코드가 훨씬 간결하고 보기가 좋군요 :D
댓글 달기