HTML 표 테두리 : 사용자 에이전트 스타일 시트가 CSS를 재정의합니까?

Question

테두리 색을 변경해야하는 HTML 표가 있습니다. 나는 그것을 이해할 수 없다.

HTML 심지어 인라인 스타일로 테두리 색상을 변경하는 것을 시도했다

/* Global CSS */ 


table { 
    border-color: red; 
} 

tr { 
    border-color: red; 
} 

td { 
    border-color: red; 


/* Table CSS */ 

.zebra-stripe { 
    border-color: red; 
    background: #002D38; 
    border: solid; 
    border-width: 1px; 
} 

.zebra-stripe table { 
    border-color: red; 
} 

.zebra-stripe tr { 
     border-color: red; 
} 

.zebra-stripe td { 
     border-color: red; 
} 

   <table> 
        <thead> 
         <tr> 
          <th>Name</th> 
          <th>Conditions</th> 
          <th>Characteristics</th> 
         </tr> 
        </thead> 
        <tbody> 
         <tr class="zebra-stripe"> 
          <td class="first-field">Element</td> 
          <td>version}</td> 
          <td></td> 
         </tr> 
         <tr> 
          <td class="first-field">ApplicationTransactionID</td> 
          <td>string, up to 64 chars, Optional</td> 
          <td>A number assigned by the calling application to uniquely identify this request.</td> 
         </tr> 
        </tbody> 
       </table> 

CSS. 아직도 운이 없다! Chrome 또는 Safari에서는 작동하지 않습니다. 테두리는 단순히 회색이며 사용자 에이전트 스타일 시트에 있습니다. 내가 잘못 타겟팅 했습니까? 10 가지 방법으로 타겟팅했습니다. CSS 클래스가 충분해야합니다. 테두리 스타일이나 테두리 너비를 잘 바꿀 수는 있지만 색상을 변경할 수는 없습니다. 하지만 대부분의 경우 테이블 행 타겟팅도 충분해야합니다.

잘못 된 것을 이해할 수 없습니다.

Answer 1

나머지 테두리 속성을 정의하지 않았습니다. 당신은 사용할 수 있습니다

이

table { 
    border: 1px solid red; 
} 

대신 또한

table { 
    border-color: red; 
} 

FIDDLE

현재 CSS에 대한 메모

( border-width, border-style 및 border-color이다), 당신은 .zebra-stripe 추가 한 tr의 클래스이지만 CSS는를 나타냅니다. (10)과는 설명하기 .zebra-stripe

UPDATE의 클래스와 부모의 table 또는 tr 내부를 겨냥한 의미 .zebra-stripe tr,이 문제는 1이

tr { 
    border-color: red; 
} 

td { 
    border-color: red; 
    <------ //no '}' tag 

을 닫습니다 잊었되고,이 있었다 이로 인해 .zebra-stripe은 전혀 작동하지 않습니다. 둘째, .zebra-stripe의 문제는 다음과 같습니다.

.zebra-stripe 
    border-color: red; 
    background: #002D38; 
    border: solid; <------ this should be 'border-style', 'border' is overwriting the others 
    border-width: 1px; 

Answer 2

내 의견에 여러 가지 실수가 있습니다. 꽤 어리 석었고, 어둠 속에서 무언가 효과가 있는지 알기 위해 많은 것을하고있었습니다.

HTML

   <table> 
       <thead> 
        <tr> 
         <th>Name</th> 
         <th>Conditions</th> 
         <th>Characteristics</th> 
        </tr> 
       </thead> 
       <tbody> 
        <tr class="row-edge"> 
         <td class="first-field">Element</td> 
         <td>version}</td> 
         <td></td> 
        </tr> 
        <tr> 
         <td class="first-field">ApplicationTransactionID</td> 
         <td>string, up to 64 chars, Optional</td> 
         <td>A number assigned by the calling application to uniquely identify this request.</td> 
        </tr> 
       </tbody> 
      </table> 

CSS

.row-edge { 
    border-top: 1px solid #0A454F; 
    border-bottom: 1px solid #0A454F; 
} 

몇 가지 색상과 라벨을 변경. 그러나 이것은 내가 필요한 것입니다.

다시 한번 감사드립니다!