테이블 셀넓이 왜 이런지 도와주세요.
에드가
테이블 코딩을 하면서 궁금한 부분이 있습니다. 코딩은 웹표준 방식으로 th 에class 값을 각각 주고 css 로class 에 width 값을 주고 있습니다. tr class=border_grey
th class=col1미확인 건수/th
th class=col2오늘 합계/th
th class=col3미배송/th
th class=col4배송완료/th
/tr이런 구조일때 css 로 table{width:800px;}th.col1{width:250px;}th.col2{width:250px;}th.col3{width:150px;}th.col4{width:100px;}예를 들어 이런 경우,드림위버에서 작업하고 있는데 드림위버는 동시보기 목적으로만 사용하고 있고, 하드코딩 중입니다.드림위버에서 live 로 놓지 않으면 영역넓이 값이 점선으로 표시되잖아요. 그런데 table의 전체 넓이를 800으로 잡았을때 셀패딩 없이 셀 각각 width를 다 더해도 750 정도 인데도 드림위버 점선이 테이블 영역을 넘어갑니다.물론 라이브로 보면 안그렇구요. 라이브에서 똑바로 보이면 되는건지 테이블 작업할때마다 거슬려서 고생중입니다.패딩값과 보더값까지 다 더해도 테이블 총 넓이값이 안나오는데도 드림위버에서 영역점선 바깥으로 나가는게 왜 이러는지 알려주세요.
셀 각각의 넓이를 다 더했을때 테이블 width로 지정한 만큼의 값이 안나와도 제멋대로 넓이가 늘어나서 결국은 table width로 커지는데 원래 이런건가요?가장 효과적인 width 값은 어떤것인지 알려주심 정말 감사하겠습니다.
OS : 테스트 브라우저 : 비교 브라우저
(정상적으로 나오는 브라우저) :
■ 문제발생 URL (jsfiddle, jsbin. codepen 등 활용):
http://
■ 발생 문제에 대한 자세한 기술:
// 여기에 작성해주세요
-
둘삥
브라우저에서 확인하시고 드림위버는 무시하세용
-
다크
원래 html 언어 자체가 오류를 무시하고 랜더링이 되는 걸로 알고 있습니다.
그래서 마크업 검사해서 오류가 많아도 익스에서 멀쩡히(?) 보일 수도 있어요.
전 드림위버 뷰는 거슬려서 안보는데.. 아마 css를 인라인으로 넣지 않는 이상 제대로 안보여질 꺼에요.
코딩하고, 브라우저에서 확인하고, 마크업 오류 찾아서 수정하는 걸 습관화 하시는 게 좋을 거 같습니다. -
도란
답변 감사합니다~
드림위버의 기본 뷰는 그냥 무시해도 되는걸까요? 그래도 자꾸 거슬려서....ㅡㅡ
가끔 드림위버서 잘못 보일때 익스에서 제대로 보이는데 일부 다른 브라우저에서 잘못 나오는 경우를 봐서
100% 무시할거는 못되는거 같길래....
그래서 W3C 에서 마크업 검사해보면 틀린게 무더기로 나온적이 있어서..
(이때도 익스에선 멀쩡히 보였거든요.ㅡㅡ) -
가을귀
저는 드림위버로 코딩할때는 뷰는 무조건 브라우저로 봤습니다.
드림위버에서는 제대로 안보이는 경우가 많아서요~
테이블 셀들의 각 넓이값은 테이블의 전체 넓이와 동일해야합니다.
%로 하신다면 전체 셀들의 합이 100%가 되야하구요.
전체 넓이보다 작다면, 랜더링할 경우 알아서 꽉차게 셀들의 넓이를 조절하게 됩니다.