테이블의 테두리가 셀의 크기에 영향을 받음

Question

테이블에 border=1을 배치하면 레이아웃이 수정되는 이유는 누구에게 말해 줄 수 있습니까?

이것이 문제입니다. 저는 저에게 org 차트를 만드는 몇 가지 JavaScript를 작성했습니다. 차트를 만드는 테이블 주위에 테두리를 배치하면 모든 것이 완벽하게 정렬됩니다. 테두리를 제거하면 줄의 일부가 너비가 격렬하게 (그리고 무작위로) 보입니다. 조직도를 연결하는 빨간색 선에서이를 알 수 있습니다.

"경계선"의 인라인 속성 (예 : <table border="1">)입니다. (나쁜 모든 잘못 정렬) http://andrewvantran.com/table1.html

국경 :

테두리가 (좋은, 모든 줄을 찾습니다) :

여기에 두 개의 데모입니다 http://andrewvantran.com/table2.html가

내가하고 싶은 테이블이 놓여있다 국경으로가는 길을 벗어나지 만 나는 국경을 원하지 않는다. 테두리를 유지하지 않으면 테두리가있는 테이블의 레이아웃을 시뮬레이션 할 수 없습니다 (원하지 않는). 어떤 아이디어?

Answer 1

표를 border-collapse:collapse;으로 설정 했습니까? 기본적으로 기본 축소는 separate이며 셀은 자체 테두리가 있습니다. 붕괴되도록 설정하면 병합되어 "옳은 것처럼 보입니다"

Answer 2

border-collapse: collapse;을 스타일 시트에 추가하십시오. 이것은 귀하의 경우에 많이 수정하는 것 같습니다.

그 외에도 적어도 셀의 너비를 사용하는 것이 좋습니다. 서로 다른 브라우저가 셀 그리기를 다르게 처리합니다. 너비를 지정하면 셀이 올바르게 정렬 될 수 있습니다. 그래프를 테스트 할 때 Firebug와 같은 검사기 도구를 사용하여 각 셀의 위치를 ​​확인하십시오. 이것은 당신을 많이 도울 것입니다.