상제일 상단의 class="top" 을 주신 이유가 단순히 상단의 파란색 라인을 나타내는것 같은데요.. 테이블 태그에 보더를 주셔두 될것 같은데요..

<style type="text/css">
    table.cashtable{border-collapse:collapse;clear:both;width:358px;margin-top:5px; border-top:2px solid #73a5d5;}
    table.cashtable tr{height:31px;}
    table.cashtable th{font:normal 12px Gulim,'굴림';padding:8px 0 3px 12px;border:1px solid #d3d3d3;background:#f4f4f4;text-align:left;}
    table.cashtable td{font:normal 11px Gulim,'굴림';padding:7px 0 2px 11px;border:1px solid #d3d3d3;}
</style>

<table cellpadding="0" cellspacing="0" border="0" class="cashtable">
<colgroup>
    <col width="80">
    <col>
</colgroup>
<tr>
    <th>총 잔액</th>
    <td><strong>20,000</strong> 원</td>
</tr>
<tr>
    <th>총 광고비용</th>
    <td><strong>230,000</strong> 원</td>
</tr>
</table>

이렇게 하시면 상단 파란색 라인이 원하시는것처럼 나옵니다..
CSS 도 줄고 태그 텍스트 몇자 줄었네요 ㅋㅋ
그리고.. 한가지 습관을 길들이세요.. CSS 기술할때 속성이 마지막일지라도 항상 " ; " 을 막아주시길 권장 드립니다..

최종 편집 : pengco (2007-04-25 11:37 AM)

질문에 대해서 조금은 접근하기 더 좋도록 DTD 나 테스트 브라우져 쯤은 같이 적어주셨으면 좋겠습니다.
지금같은 화면이야 table 의 border-top 에 적용으로 하라는 적절하고 좋은 예가 나와서 결론이 지어졌다지만...
아무튼 질문을 올리는 분들도 조금더 자세한 사항을 알려주셨으면 합니다.

border 에 대해서 위 질문과는 조금 다른 글 일수도 있지만 저도 궁금해서 한번 해봤습니다.

아래 링크된 페이지는 브라우저별로 border의 굵기에 따라 top 과 right 영역의 변화를 대략 8단계로 잘라서 본 화면입니다.

윈도우 브라우저별 border의 변화

윈도우 기반에 IE6, FF, Op 브라우저만 봤는데 결론은 다 다르다는 겁니다.

Opera브라우저가 Acid2 Test를 통과했으니 Opera의 랜더링 방식이 옳은걸지도 모르지만 모든 브라우저에서 동일하게 보이는 방법은 아마도 위 글 처럼 table 에 border-top 을 줘서 하는게 빠르겠죠

하지만 위 예는 간단한 방법이니 저렇게 변경해도 되지만 제 경우엔 꼭 모든 브라우저의 모양을 똑같이 마추는것보다는 브라우저별로 이상하지 않게만 동일한 모양에 정보의 전달이 원활하게 이뤄지는것이 더 효율적이지 않을까 생각됩니다.

이렇게 말하면 1px의 미학을 추구하는 분들에게 돌을 맞을지도 모르지만요