2014-06-12 5 views
0

this Demo을 보시고 테두리 설정이 없는데 왜 표의 셀 사이에 선이 있는지 알려주십시오.공백 사이의 표 셀

<table style="width:300px"> 
    <tr> 
     <td>Jill</td> 
     <td>Smith</td> 
     <td>50</td> 
    </tr> 
    <tr> 
     <td>Eve</td> 
     <td>Jackson</td> 
     <td>94</td> 
    </tr> 
    <tr> 
     <td>Eve</td> 
     <td>Jackson</td> 
     <td>94</td> 
    </tr> 
</table> 
+0

기본적으로 '테두리 설정'이 있습니다. 그래서'table' 태그에'cellspacing = 0'을 사용해야합니다. –

+0

가능한 dublicate - http : // stackoverflow.co.kr/questions/21108708/how-to-remove-spaces-cells-in-a-html-table –

답변

0

사용 :

<table style="width:300px" cellspacing="0"> 

fiddle

+1

설명 해주시기 바랍니다. –

+1

나는 그것을 찬성 한 사람이 아니지만 일반적으로 뷰 관련 항목을 HTML에서 제외하고 CSS에 저장하면 HTML이 계층 컨테이너의 일종으로 만 작동하는 것이 가장 좋습니다. 귀하의 경우'cellspacing = "0"은 뷰와 관련이 있으며'border-spacing : 0'으로 변경할 수 있습니다. –

3

당신은

table{ 
    border-collapse:collapse; 
} 

이 국경을 축소하려면 추가 할 수 있습니다

Fiddle

1

기본 브라우저 스타일은 표 셀 태그에 한 픽셀의 패딩을 추가합니다.

은 또한 테이블 태그에 경계 - 간격 또는 테두리 붕괴 속성을 사용하여 테이블의 모든 테두리를 제거 할 수 있습니다 http://meyerweb.com/eric/tools/css/reset/

같은 CSS 파일을 사용할 수있는 기본 브라우저 CSS를 방지하려면.

table { 
    border-spacing: 0; 
} 

또는

table { 
    border-collapse: 0; 
} 
+0

기본 채우기는 일반적으로 "태그"가 아닌 표 셀에만 적용됩니다. "CSS 재설정"은 가장 무딘 도구이며 혼란의 원인이됩니다. –

0

는 라인 셀 사이의 간격에 의해 야기된다. 이것은 빈 공간으로, 보통 테이블의 배경 (여기서는 초록색)이 빛난다는 것을 의미합니다. 이 간격은 논리적 경계 사이의 간격으로 볼 수 있기 때문에 종종 "경계 간격"으로 설명됩니다. 여기와 같이 테두리가 설정되지 않은 경우 테두리는 논리적으로 존재하지만 너비는 0입니다. 인접한 두 개의 셀에 대해서는 다음과 같이 설정합니다.

... [셀 1 내용] [오른쪽 테두리] [테두리 간격] [셀 테두리 2] [셀 1의 왼쪽 테두리] [셀 1 내용]. ..

국경처럼 보일지 모르지만 실제로는 보이지 않는 경계 사이의 간격입니다.

  1. table 요소에 HTML 속성 cellspacing=0을 사용

    이를 제거하는 방법은 여러 가지가 있습니다. 이는 테이블을 정상적으로 렌더링하는 모든 브라우저에서 지원됩니다. 일반적으로 HTML 4에서는 더 이상 사용되지 않으며 HTML5에서는 부적합하지만 브라우저는 계속 지원할 것으로 기대됩니다.

  2. HTML 속성에 해당하는 table { border-spacing: 0 }을 사용하십시오. 브라우저 지원은 좋지만 다른 방법보다 더 제한적입니다. 이 메서드를 사용하면 사이의 테두리에 대해 0이 아닌 테두리 간격을 설정할 수 있습니다. table {border-spacing: 0 2px}.
  3. 매우 유용한 브라우저 지원을 사용하는 table { border-collapse: collapse }을 사용하십시오. 가능한 부작용과 함께 접히는 경계 모델이 사용됩니다. 인접한 셀의 테두리 (가상 너비가 0 인 경계선 일 수도 있음)를 일치 시키므로 둘 사이에 테두리 간격이 없어야합니다.