표 셀 사이의 1px 간격

Question

이 버그로 인해 머리가 아플 수 있습니다. 웬일인지 나의 테이블은 중간의 세포의 왼쪽과 오른쪽에 1px 갭을 가지고있다. 나는 이것이 무엇을 일으키는 지 전혀 모른다. 여기에 예제를 볼 수 있습니다 : http://jsfiddle.net/JdayW/1/

내가 필요로하는 것은 "마스크"의 역할을하는 중간 셀의 이미지로 그 배경 이미지를 볼 수 있습니다. 이미지의 왼쪽과 오른쪽에는 브라우저 윈도우의 가장자리까지 뻗어있는 단색이 있어야합니다. 나는 이것을 달성하는 가장 좋은 방법은 표를 찾았습니다. 그러나 나는 잘못 될 수 있습니다. 중간 셀이나 전체 테이블에 배경색을 넣을 때 틈새가 없어지지만 이미지 뒤에 배경색을 사용할 수 없어 분명히 저에게는 효과가 없을 것입니다.

사이트에서 나는 투명도가있는이 "마스크"이미지를 건물의 고정 된 배경 위로 스크롤 할 것입니다. 그래서 나는 그 배경에 PNG를 jpg로 만들 수 없습니다.

테이블을 width:100%으로 설정하고 중간 셀을 고정 300px 너비로 설정했기 때문에 이런 일이 발생 했습니까?

Answer 1

어떤 이유로 든 td 태그가 여백을 유발하고있었습니다. 50 %의 폭이 ​​태그를 0로 설정하고 왼쪽과 td 권리를 부여하는 것은 문제를 해결하기 위해 듯 :

table {width:100%; height:300px; border-collapse: collapse; border-spacing: 0;} 

td.left, td.right {background-color:green; margin:0; padding:0; width:50%;} 

td.middle {width:300px; margin:0; padding:0;} 

근무 jsfiddle : http://jsfiddle.net/JdayW/34/

Answer 2

당신은 단지 중앙에 0 픽셀의 패딩을 설정하는 시도가 td? http://jsfiddle.net/JdayW/45/

td.middle {width:300px;padding: 0px} 

왼쪽과 오른쪽 TDS는 모든 측면에 1 픽셀의 차이가 있지만, 배경 색상이 패딩을 포함하기 때문에 당신은 당신이 각 TD에 공백을 넣으면 모든 TDS를 설정할 수 있습니다, 그 표시되지 않습니다 패딩 : 0px http://jsfiddle.net/JdayW/44/