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) 에서 확인했습니다.
번호 | 제 목 | 글쓴이 | 날짜 |
---|---|---|---|
2703607 | MFC 작성중에 인터넷(Web)관련하여 연동이 되게끔 만들려고 하고 있습니다 | Addictive | 2025-08-02 |
2703579 | 톰캣-아파치 서버에 관한 질문입니다. (2) | 바나나맛사탕 | 2025-08-02 |
2703520 | 직사각형그리기 질문이요~! | 펴라 | 2025-08-02 |
2703461 | 웹호스팅을 변경하려고 합니다. | 찬놀 | 2025-08-01 |
2703432 | dl이 dt크기만큼 안늘어납니다. (5) | 불꾼 | 2025-08-01 |
2703372 | 조직도이미지의 대체텍스트는... (9) | 한샘가온 | 2025-07-31 |
2703348 | 쿽스모드가 무엇인지 궁금합니다. (4) | 나려 | 2025-07-31 |
2703324 | [접근성]더보기 (8) | 매1혻적 | 2025-07-31 |
2703274 | AVADA 테마 메인화면 슬라이드 질문.. | 뿌우 | 2025-07-30 |
2703218 | kboard 게시판 질문요 !! | 핑크빛입술 | 2025-07-30 |
2703188 | HTML 4.01에서 faq 제이쿼리 슬라이드업 되면서 떨림문제 (2) | 꺄홋 | 2025-07-30 |
2703163 | 수다님 죄송한데 질문하나하겠습니다.. (1) | 나오 | 2025-07-29 |
2703138 | [질문]java강좌란에서 궁금한 점이 있어 올립니다. (2) | 옆집오빠야 | 2025-07-29 |
2703109 | HTML5 코드 내용이 달라요..ㅜㅜ (1) | 우솔 | 2025-07-29 |
2703032 | 이런 질문도 가능할 지는 모르겠지만요~ (1) | SweetChoco | 2025-07-28 |
2703009 | 레이어 코딩 어떻게 해야 할까요? | 수련 | 2025-07-28 |
2702980 | 익스 개발툴에서 대체텍스트보기에 대해 질문있어요~ (5) | 핑크빛애교 | 2025-07-28 |
2702927 | jsp 공부중인대 회원등록을누르면 등록이 안되고 에러가나요 | 소율 | 2025-07-27 |
2702843 | 16진수 출력시 10을 제거 하는 방법 좀 알려주세요 (3) | Schokolade | 2025-07-26 |
2702818 | float:left , right 왜그런거죠? (4) | 화이트캣 | 2025-07-26 |