스타일 시트가 테이블 셀 패딩이 작동하지 못하게 함

Question

다른 사람의 스타일 시트를 기반으로 웹 페이지를 작성하고 있습니다. 스타일 시트에는 다음이 포함됩니다.

table { 
    border-collapse: collapse; 
} 

th, td { 
    padding: 0; 
} 

이제 0이 아닌 셀 패딩이있는 테이블을 만들고 싶습니다. 하지만이 스타일 시트를 재정의하는 데 문제가 있습니다.

<table cellpadding="10"> 
    <tr> 
    <td padding="10"> 
     Foo 
    </td> 
    ... 
    ... 
    </tr> 
</table> 

위 작업 중 어느 것도 작동하지 않습니다. 셀 패딩은 제로 (0)로 유지됩니다.

스타일 시트를 재정의하려면 어떻게해야합니까 (다른 스타일 시트를 사용하지 않는지).

Answer 1

당신은 인라인 스타일 수행 할 수 있습니다

<td style="padding: 10px"> 

을하거나 table에 클래스를 할당하고 이에 대한 규칙을 만들이위한

<table class="table"> 
    <tr> 
    <td> 
     Foo 
    </td> 
    </tr> 
</table> 

와 CSS :

table td { 
    padding: 10px; 
} 

을

Answer 2

인라인 스타일 (즉, 요소에 선언 된 스타일), 인라인 스타일 시트 (즉, 같은 페이지에서 선언되었지만 요소에 직접 선언되지 않은 스타일) 또는 외부 스타일 시트를 사용할 수 있습니다. 유감스럽게도 CSS 스타일은 대부분의 경우 속성을 무시합니다 (여기서 사용하는 속성은 더 이상 사용되지 않습니다. 즉, 본질적으로 스타일 시트를 사용한다는 의미입니다).

Answer 3

예를 들어

과 같이 선택 도구에서 더 자세하게 표시하려고합니다.

table td { 
    padding:10px; 
} 

위

th, td { 
    padding: 0; 
} 

는 CSS 특이성 here에 대한 자세한 내용보다 우선합니다.

Answer 4

테이블에 대한 새 클래스를 만들고이 스타일을 갖고 싶은 테이블에만 적용하십시오.

table { 
    border-collapse: collapse; 
} 

th, td { 
    padding: 0; 
} 

table.newStyle { padding:10px; } 


<table class="newStyle"> 
    <tr> 
    <td padding="10"> 
     Foo 
    </td> 
    ... 
    ... 
    </tr> 
</table> 

Answer 5

그냥 필요한 스타일을 인라인 : 이렇게하면

<table style="border-collapse: separate; border-spacing: 10px;"> 
... 
</table> 

, 당신은 어느 td에 padding="10" 필요하지 않습니다. 작업 예제는 http://jsbin.com/exovat/edit#html을 참조하십시오.

스타일을 인라이닝하는 대신 스타일 시트 다음에로드되는 사용자 정의 스타일 시트에 액세스 할 수 있습니다. 그럼 당신은 <table id="foo"> 같은 테이블에 ID를 설정할 수 있습니다 다음, 그냥이 같은 사용자 정의 스타일 시트에서 자신의 스타일을 오버라이드 (override) :

table#foo { 
    border-collapse: separate; 
    border-spacing: 10px; 
} 

[참고 : border-spacing CSS 속성 아래 IE7 또는 작동하지 않습니다; 당신이 지원할 브라우저가 필요하다면 몇몇 hackier 방법을 사용하는 것이 더 낫다.]