caption에 디자인 적용시 우측 잘림
삐용삐용
안녕하세요. 최근 이런저런 시도를 하다보니, 질문도 많아지네요;;
일단 캡쳐 이미지가 아래와 같은데요. 디자인 상단에 표의 제목 영역이 있어서, 보통은 감춰놓는 캡션을 활용했습니다.
그게 의미상 더 부합할테니까요^^;
전체 660px인 테이블인데 캡션 영역에 bg를 줬습니다. 그런데 크롬에서만 유독 우측이 2픽셀 잘려 보이네요.
참고로 테이블 외곽의 보더는 table 태그에 먹혀 있습니다. right, left bottom... 유독 right 보더의 두께인 2픽셀만큼 잘리는게..영신경쓰이네요; 혹여 비슷한 경험 하신 분들 있으신지 해서 여쭙니다. 꾸벅^^코드
table width=100% border=1 summary= class=rounded_top mgb40
caption style=width:100%;표 제목/caption
colgroup
col width=25% /
col width=25% /
col width=25% /
col width=13% /
col width=13% /
/colgroup
tr
th/th
th/th
th/th
th colspan=2 class=end/th
/tr
tr
td/td
td/td
tdstrong class=dblue/strong/td
td colspan=2 class=end/td
/tr
tr
th/th
th/th
th/th
th/th
th class=end/th
/tr
tr
tdspan class=hotpink/span/td
td/td
tdstrong class=hotpink/strong/td
td/td
td class=end/td
/tr
/tablecss
table.rounded_top {border-left:2px solid #81afd7 ;border-bottom:2px solid #81afd7; border-right:2px solid #81afd7; border-top:0 none !important;}
table.rounded_top caption {display:table-caption; #display:block; width:100%; caption-side:top; background:url(/images/common/bg_th_rtable.gif) left top no-repeat; padding:8px 0; color:#fff; font-weight:bold;}
table.rounded_top th, .rounded_top td {border-bottom:0 none !important; border-top:0 none !important; border-left:0 none !important; border-right:1px solid #d6e5f3;}
table.rounded_top th.end, .rounded_top td.end {border-right:0 none !important;}
table.rounded_top th {background:#ebf2f8; font-weight:normal; font-size:11px; color:#6996bd; padding:6px 0 5px 0;}
table.rounded_top td {text-align:center; /*padding:14px 10px 13px 10px;*/ padding:0 10px; height:39px;}
table.rounded_top .bottom td {/*padding:9px 10px 8px 10px;*/}
table.rounded_top td.total {font-size:16px; font-weight:bold; color:#b42f77; text-align:right;}
table.rounded_top td.date_choice a {padding-left:4px;}
-
갤1
앗 감사합니다^^; 저도 테스트를 이래저래 해봤는데, 어쨌거나 table에 준 보더 때문인듯 해요. 테이블의 좌우에 준 보더를 td, th에 옮기면 될거 같긴 한데..좀 더 찾아보려구요^^ 감사합니다.
-
차미
테스트해보니간 caption style=\width:100%;\ 를 caption style=\width:660px;\ 로 수정하니 둥근박스가
제대로 출력이 되네요, 정확한 원인은 잘 모르겠습니당.
크롬버전 4.0.249.78 (36714) 에서 확인했습니다.